如何为鼠标悬停元素的子元素设置颜色？

Hey there! Let's figure out how to get that hover effect working correctly for your setup.

First, let's break down the issue with your current CSS: the selector .wbbBoard:hover>.containerHeadline>h3>a isn't targeting the link properly. That's because .containerHeadline isn't a direct child of .wbbBoard (the > selector only matches immediate children). Looking at your HTML structure, .containerHeadline lives inside a <div> that's a direct child of .wbbBoard—so your selector is skipping that middle <div> layer.

Fix 1: Target the link when hovering .wbbBoard #

If you want the link to change color when hovering over the .wbbBoard box, adjust the selector to account for that nested <div>:

li { list-style: none; }

/* Hover on .wbbBoard → style the nested link */
.wbbBoard:hover > div > .containerHeadline > h3 > a {
  color: #f4f4f4;
}

/* Keep your original hover background for .wbbBoard */
.wbbBoardList .wbbBoard:hover {
  background-color: #333;
}

The > div > part explicitly targets the direct child <div> of .wbbBoard, then drills down to the link. Alternatively, you could use a general descendant selector (replace > with spaces) for less strict targeting:

.wbbBoard:hover .containerHeadline h3 a {
  color: #f4f4f4;
}

Fix 2: Target elements when hovering the entire list item #

If you want the hover effect to trigger when the user hovers over the entire <li> (.wbbBoardContainer), adjust the selector to start with that parent element:

li { list-style: none; }

/* Hover on the li → style .wbbBoard and the link */
.wbbBoardContainer:hover .wbbBoard {
  background-color: #333;
}
.wbbBoardContainer:hover .containerHeadline h3 a {
  color: #f4f4f4;
}

Key Takeaway #

• Use > for direct parent-child relationships only.
• Use spaces between selectors to target any descendant element (no matter how deeply nested).
• Always map your selector structure to match your HTML hierarchy—this is the most common reason hover effects fail to target the right elements!

内容的提问来源于stack exchange，提问作者user9180966