select elements with css :hover declaration

Question

I did not find any answer in the web, so may be somebody could help me.

For example if we have next CSS declaration:

.hot_imgs li .detail{position:absolute;left:0;top:0;display:none;width:190px;height:190px;padding:0 40px;color:#fff;font-size:16px;font-family:"Microsoft YaHei","\5fae\8f6f\96c5\9ed1","\5b8b\4f53"}
    .hot_imgs li .detail h3{margin-top:75px}
    .hot_imgs li a:hover .img_bg,.hot_imgs li a:hover .detail{display:block}

And given elements:

<div class="hot_imgs">
    <li id="711F">
      <a href="#">
        <img src="www.fishki.com" alt="Young" width="270" height="190">
        <span class="img_bg"></span>
        <div class="detail">
          <h3>Young</h3>
        </div>
      </a>
    </li>
<div>

As we can see from CSS declaration, when link of the list inside div with class hot_imgs is hovering, the div will be overlaid by another div with details class.

I'd like to use jQuery to identify which elements can potentially have a ":hover" attribute triggered on roll over without any mouse interaction.

Thanks a lot

I don't really understand. Do you want the jQuery selector for :hover? — Christian Lundahl
– Christian Lundahl, Commented Jun 24, 2015 at 13:16
Please clarify: are you trying to find the elements for which a :hover css selector (pseudo-class) is defined? — doldt
– doldt, Commented Jun 24, 2015 at 13:16
unclear question..please edit the question and make it clear.. — Leo the lion
– Leo the lion, Commented Jun 24, 2015 at 13:20
:hover is not an element attribute/property, it's a pseudo selector — Ruan Mendes
– Ruan Mendes, Commented Jun 24, 2015 at 13:40

ajmajmajma · Accepted Answer · 2015-06-24 13:45:49Z

1

You cannot target pseudo elements themselves, so if you are going to use jquery for this it has something for hover built in. You need to know what items you want to check for hovering, so for example if you wanted to check the image you could do.

$(".hot_imgs img").hover(function(){
  //your logic here
});

Just a side note - All elements can have ':hover', so you will need to target with jquery. So there is nothing to check which elements 'can potentially' have :hover, as it is a pseudo selector/class.

Here is a fiddle for this example - http://jsfiddle.net/W4Km8/5413/

edited Jun 24, 2015 at 13:45

answered Jun 24, 2015 at 13:39

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AlexBerd Over a year ago

Thus, I have to do listener to all document in order to check hover events, in order to solve this issue like: $(document).hover(function(e){ if($(e.toElement).is('img'))})???

ajmajmajma Over a year ago

@AlexBerd yes, these are listeners for hover on the elements you choose to target.

AlexBerd Over a year ago

Very sad that there is no other solution to do this. Thanks

ajmajmajma Over a year ago

@AlexBerd you cannot target things with jquery that are not truly on the DOM :)

Collectives™ on Stack Overflow

select elements with css :hover declaration

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related