Use :hover to modify the css of another class?

by

There are two approaches you can take, to have a hovered element affect (E) another element (F):

  1. F is a child-element of E, or
  2. F is a later-sibling (or sibling’s descendant) element of E (in that E appears in the mark-up/DOM before F):

To illustrate the first of these options (F as a descendant/child of E):

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}​

To demonstrate the second option, F being a sibling element of E:

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}​

In this example, if .wrapper was an immediate sibling of .item (with no other elements between the two) you could also use .item:hover + .wrapper.

JS Fiddle demonstration.

References:

More Related Contents:

  1. Hover over image to get a box with multiple links in html/JavaScript
  2. How do I change the text of a div when I hover over a button?
  3. How do I simulate a hover with a touch in touch enabled browsers?
  4. How to change CSS property using JavaScript
  5. How to prevent sticky hover effects for buttons on touch devices
  6. How to toggle class using pure javascript in html
  7. How to do this mouse over effect in jquery?
  8. How to change the style of alert box?
  9. Replacing css file on the fly (and apply the new style to the page)
  10. How to get class object’s name as a string in Javascript?
  11. Webkit-based blurry/distorted text post-animation via translate3d
  12. Stop fixed position at footer
  13. How to add anything in through jquery/javascript?
  14. Responsive horizontal page sliding
  15. Need to find height of hidden div on page (set to display:none)
  16. change background image in body
  17. What are the possible ways to hide an element via CSS [closed]
  18. unable to scroll in scrollView
  19. Google Maps API v3: InfoWindow not sizing correctly
  20. What are some good ways to prevent people from copying my source code? [closed]
  21. How to check if a Javascript Class inherits another (without creating an obj)?
  22. Scroll Position of div with “overflow: auto”
  23. Styling Vuetify selectors
  24. using css modules how do I define more than one style name
  25. Wrapping lists into columns
  26. IIS 7.5 no images css js showing
  27. How do I dynamically adjust css stylesheet based on browser width?
  28. Polymer share styles across elements
  29. How do I put a clear button inside my HTML text input box like the iPhone does?
  30. Possible to reverse a css animation on class removal?

Leave a Comment