CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AlexBerd
AlexBerd

Reputation: 1504

select elements with css :hover declaration

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

Upvotes: 1

Views: 132

Answers (1)

ajmajmajma
ajmajmajma

Reputation: 14216

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/

Upvotes: 1

Related Questions