bradders bradders - 6 months ago 34
jQuery Question

Hide all other divs with the same name on div hover, show hovered div

I have a list of PHP generated coupons, all with the div id (#coupon) and the class of (.coupon_hover)

When the user hovers over one of the divs named #coupon then I want all of the other divs named #coupon to disappear except for the one which is being hovered over. I would preferably like to do this in CSS only.

I have been able to get all the coupons to hide below the one which is hovered using this code :

#coupon:hover ~ .coupon_hover {

I have made a fiddle

See how when you hover over the second coupon the first one stays and the last one hides, I want it so that when any of them hover then all the others hide accept for the one hovered over, the name of the div must keep its name as just (#coupon) it cannot be #coupon1 #coupon2 ect....

Thank you for any help


You can try something like this:



  • You should have unique ids. So to manipulate similar elements use class.
  • You should use visibility: hidden instead of display: none. display: none will change DOM structure making your focused element to shift and eventually triggering focus out.