如何在鼠标悬停div时改变其背景色及内部a标签文字颜色？

你之前的写法逻辑完全搞反了——a:hover + .div用的是兄弟选择器，但a是div的子元素，并非兄弟关系；而且你要触发的是鼠标悬停在div上的样式，不是悬停在a上。

直接给你正确的实现代码：

HTML结构（和你提供的一致） #

<div class="example"><a href="#">TEXT</a></div>

CSS代码 #

/* 给div加基础样式，让hover效果更直观 */
.example {
  padding: 8px 12px;
  transition: all 0.3s ease; /* 可选，加过渡动画让样式变化更丝滑 */
}

/* 默认状态下a标签的样式 */
.example a {
  color: #0066cc;
  text-decoration: none;
}

/* 鼠标悬停在div上时，修改div的背景色 */
.example:hover {
  background-color: #f0f0f0;
}

/* 鼠标悬停在div上时，修改内部a标签的文字颜色为黑色 */
.example:hover a {
  color: #000;
}

原理很直白：当鼠标悬停在.example这个div上时，通过后代选择器.example:hover a直接选中它内部的a标签修改样式就行，完全不需要JavaScript。

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