javascript - Bringing a div to :active state via jquery .trigger() method - Stack Overflow

admin管理员组

文章数量:1345475

I have assigned to a div an :active CSS pseudo class, to make it "responsive" on clicks and holds.

   .quarter:active{
      opacity: 0.5;
   }

What I want to achieve is to simulate a long click with JQuery. The .trigger("click") doesn't seem to do the trick since there is no visible discoloration. I have also tried with .trigger("focus") and .trigger("mousedown") but it seems I mess up somewhere.

    <div id="1" class="quarter green" ></div>
    <div id="2" class="quarter red" ></div>
    <div id="3" class="quarter yellow" ></div>
    <div id="4" class="quarter blue" ></div>

Is there a way to achieve that or do I have to use a toggleClass approach?

Edit: Thanks to nashcheez answer I solved my problem using the .trigger("focus") followed by a setTimeout(...{ .blur() }). Thank you all for the quick responses.

I have assigned to a div an :active CSS pseudo class, to make it "responsive" on clicks and holds.

   .quarter:active{
      opacity: 0.5;
   }

What I want to achieve is to simulate a long click with JQuery. The .trigger("click") doesn't seem to do the trick since there is no visible discoloration. I have also tried with .trigger("focus") and .trigger("mousedown") but it seems I mess up somewhere.

    <div id="1" class="quarter green" ></div>
    <div id="2" class="quarter red" ></div>
    <div id="3" class="quarter yellow" ></div>
    <div id="4" class="quarter blue" ></div>

Is there a way to achieve that or do I have to use a toggleClass approach?

Edit: Thanks to nashcheez answer I solved my problem using the .trigger("focus") followed by a setTimeout(...{ .blur() }). Thank you all for the quick responses.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 21, 2017 at 13:12 Thodoris asked Mar 21, 2017 at 12:28 ThodorisThodoris 74222 gold badges88 silver badges2626 bronze badges 7

• 1 I would use a toggleClass approach, why not. – niklas Commented Mar 21, 2017 at 12:32
• :active is mostly used with a and button not sure if it would work with div – abhishekkannojia Commented Mar 21, 2017 at 12:32
• how about using selector: .quarter:active,.quarter.active ? – blackmiaool Commented Mar 21, 2017 at 12:33
• This question would probably easier to answer when you add a bit more information like: Why do you need a "mousehold" event in JS and what do you actually want to achieve? – empiric Commented Mar 21, 2017 at 12:37
• @abhishekkannojia Yes this definitely works with :active – empiric Commented Mar 21, 2017 at 12:38

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

You can do it without jQuery and in pure css. You can just provide it a focus state in css and a tabindex attribute in the html.

Refer code:

.quarter {
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}

.quarter:focus {
  opacity: 0.5;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<div id="1" class="quarter green" tabindex="1"></div>
<div id="2" class="quarter red" tabindex="1"></div>
<div id="3" class="quarter yellow" tabindex="1"></div>
<div id="4" class="quarter blue" tabindex="1"></div>

This way your opacity persists on click of the div, and returns back to the normal value on clicking anywhere outside.

Read more about the tabindex attribute here.

Generally, :active can be applied to <a> or <button> elements (as they are clickable), to make a div :active first you need to click on div it, then will be in :active state, also in the same case you can use :focus on this element to show as active. Second option you can use active class and add it on particular div.

See the below snippet with its working.

$('.quarter.green').trigger('focus');

.quarter:active,
.quarter:focus,
.quarter.active {
  opacity: 0.5;
  color: red;
}

.quarter:active {
  color: green
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="1" class="quarter green" contenteditable="true">1 Using contenteditable property</div>
<div id="2" class="quarter red active">2 Using active class</div>
<div id="3" class="quarter yellow">3</div>
<div id="4" class="quarter blue">4</div>

In case you want to use toogleclass with transitions this can work

$('.quarter').click(function(){
    $(this).toggleClass('active');
})

.quarter:active, .active{
      opacity: 0.5;
      transition: 1s all ease-in;
   }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="quarter green" >green</div>
    <div id="2" class="quarter red" >red</div>
    <div id="3" class="quarter yellow" >yellow</div>
    <div id="4" class="quarter blue" >blue</div>

本文标签： javascriptBringing a div to active state via jquery trigger() methodStack Overflow