Make sure that your selector is working properly. I can't tell for sure without seeing your HTML, but the way that the jQuery selector selector[x=?]
selector works is by finding all elements that match selector
with attribute x="?"
.
For instance, the selector img[height=100]
will select all images whose height attribute is set to 100.
Now in your case, you have the selector img[data-hover]
, which will select all images with a data-hover attribute set, e.g.
<img src="..." data-hover=""/>
It doesn't matter what it is set to, since you didn't specify that, but it does have to have that attribute in order for it to work. If you are just trying to bind the hover event to the images, you can do that with just the .hover()
method.
$("img").hover(function(){});
JSFiddle
In this JSFiddle example, you can see what was mentioned above. Since both images have their height attribute set, they both lose opacity onHover, but since the bottom one is the only one whose height is set to 200, it is the only one that is inverted onHover.