How to Manipulate CSS of Separate Classes with :hover?

Manipulating CSS of Separate Classes with :hover

When working with multiple classes in CSS, there may be a need to modify the styling of one class based on the hover state of another element. While it may seem intuitive to use a nested selector like .item:hover .wrapper, this is not directly possible.

However, there are two viable approaches to achieve this effect:

• Sibling and Child Relationships: If the target element (wrapper) is a child or immediate sibling element of the hovered element (item), you can utilize the ~ (sibling) or (immediate sibling) selectors. For example:

.item:hover + .wrapper {
  background-color: red;
}

• Descendant Relationships: In cases where the target element is a descendant of the hovered element, you can employ the > (descendant) selector within the .item:hover rule. For example:

.item:hover > .child > .wrapper {
  color: black;
}

Remember, these approaches are effective when the targeted elements are siblings or descendants within the HTML structure. For elements that are not directly related in the DOM, you may need to consider alternative solutions such as JavaScript.

The above is the detailed content of How to Manipulate CSS of Separate Classes with :hover?. For more information, please follow other related articles on the PHP Chinese website!