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


Tags: javascript,jquery,html,css,hover

Problem :

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 {
display:none;
}

I have made a fiddle https://jsfiddle.net/04t5psbu/2/

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



Solution :

You can try something like this:

JSFiddle

Note:

  • 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.

    CSS Howto..

    how to align horizontally using CSS

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    jQuery / CSS: How to add page breaks dynamically

    How to fit elements in 100% width without absolute positioning?

    how to: dynamic navigation bar size depending on dynamic image size?

    how to choose what transform is applied first in css

    How to change the color of a textfield dynamically in sencha?

    How to scale div from jquery css

    How to create a WoW-like cooldown effect?

    How to switch css property according to some condition

    How to use CSS property position:fixed with top:50px and height:100%?

    How to style a list so that it looks like a table, with various line height?

    CSS how to revert SVG animation on mouseout from current frame

    how to style a symfony2 form button

    How should you comment css? [closed]

    How can I turn a background visibility on and off with jQuery?

    How to style easypiechart using CSS?

    Slide up/down effect with ng-show and ng-animate

    how to style simple_form with material design or custom css

    How to Center CSS Tabs

    How to give css sprites effect?

    how can i add style with CSS to