How Can I Apply Hover Effects to Multiple CSS Elements Simultaneously?

Applying Hover Effects across Multiple Elements in CSS

When hovering over a specific element, you may want to apply effects to multiple related elements. For instance, you have two adjacent elements, "image" and "layer," each with separate borders. How can you make it so that hovering over one element affects the border colors of both elements?

Solution Without JavaScript

To achieve this without JavaScript, you can utilize CSS like this:

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

In this example, when you hover over the ".section" element, the "img" within it will have a 2px solid border with the color #333. Simultaneously, the ".layer" element within ".section" will also receive a 2px solid border with the color #F90. Identical behavior occurs when you hover over the ".layer" element.

The above is the detailed content of How Can I Apply Hover Effects to Multiple CSS Elements Simultaneously?. For more information, please follow other related articles on the PHP Chinese website!