如何为悬停元素的子元素着色

Question

我有这个senario：

li {
  list-style: none;
}

.wbbBoard:hover>.containerHeadline>h3>a,
.wbbBoardList .wbbBoard:hover {
  color: #f4f4f4;
  background-color: #333;
}

<ul class="wbbBoardList">
  <li data-board-id="4" class="wbbBoardContainer wbbDepth2">
    <div class="wbbBoardNode1 wbbBoard box32">
      <span class="icon icon32 icon-lock"></span>
      <div>
        <div class="containerHeadline">
          <h3><a href="#">Title</a></h3>
          <p class="wbbBoardDescription">description</p>
        </div>
      </div>
    </div>
  </li>
</ul>

当我将鼠标悬停在元素上时，我希望标题显示另一种颜色，就像正在更改描述一样。我怎么能用css或更少？

Answer 1

您的选择器.wbbBoard:hover > .containerHeadline > h3 > a错误，因为.containerHeadline不是.wbbBoard的直接孩子

  

> select the immediate child elements...

使用.wbbBoard:hover .containerHeadline > h3 > a

li {
  list-style: none;
}

.wbbBoard:hover .containerHeadline>h3>a,
.wbbBoardList .wbbBoard:hover {
  color: #f4f4f4;
  background-color: #333;
}

<ul class="wbbBoardList">
  <li data-board-id="4" class="wbbBoardContainer wbbDepth2">
    <div class="wbbBoardNode1 wbbBoard box32">
      <span class="icon icon32 icon-lock"></span>
      <div>
        <div class="containerHeadline">
          <h3><a href="#">Title</a></h3>
          <p class="wbbBoardDescription">description</p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 2

你需要在css下方申请才能使其正常运作

.wbbBoardList .wbbBoard:hover a {
    color: #fff;
}

li {
  list-style: none;
}
.wbbBoard:hover > .containerHeadline > h3 > a,
.wbbBoardList .wbbBoard:hover {
	color: #f4f4f4;
	background-color: #333;
}
.wbbBoardList .wbbBoard:hover a {
color: #fff;
}

<ul class="wbbBoardList">
					
					
			<li data-board-id="4" class="wbbBoardContainer wbbDepth2">
			<div class="wbbBoardNode1 wbbBoard box32">
				<span class="icon icon32 icon-lock"></span>
				
				<div>
					<div class="containerHeadline">
						<h3><a href="#">Title</a></h3>
						<p class="wbbBoardDescription">description</p>
					</div>
					
										
										
					
				</div>
			</div>
      </li>
			</ul>

Answer 3

我只能在将 wbbBoard 悬停时才能理解您要更改标题颜色的问题。如果您想进行此更改，请使用

修改CSS

.wbbBoard:hover .conatinerHeadline h3 a {
  color: green;
}

我认为这有助于解决这个问题。