鼠标悬停li元素时子元素a标签CSS颜色未生效问题求助

你的问题出在悬停状态下a标签的CSS选择器写法错误，导致颜色样式无法正确应用。

错误原因 #

原代码中这一行选择器逻辑错误：

.product-menu-container ul li:hover .product-menu-container ul li a {
  color: #fff;
}

这个选择器会试图在被hover的li元素内部，再次寻找.product-menu-container ul li a这样的嵌套结构，而你的DOM里a是直接作为hover的li的子元素存在的，所以该选择器匹配不到任何元素。

修正方案 #

把上述错误的选择器替换为：

.product-menu-container ul li:hover a {
  color: #fff;
}

这样就能正确选中被hover的li下的直接子元素a，实现悬停时文字变白的效果。

完整修正后的CSS代码 #

.product-menu-container ul {
  padding: 10px;
}

.product-menu-container ul li {
  list-style: none;
  padding: 11px 0px;
  margin: 10px 5px;
  background-color: #fbe3ef;
  /* border: 0.5px solid #fdadd9; */
  text-align: center;
  border-radius: 12px;
}

.product-menu-container ul li:hover {
  background-color: #de5499;
}

.product-menu-container ul li a {
  font-size: 18px;
  text-decoration: none;
  color: #343434;
  font-family: 'Roboto', sans-serif;
}

/* 修正后的选择器 */
.product-menu-container ul li:hover a {
  color: #fff;
}

.product-menu-container h4 {
  text-align: center;
  color: #fff;
  padding: 5px;
  background: rgb(2, 103, 124);
  background: -moz-linear-gradient(180deg, rgba(2, 103, 124, 1) 20%, rgba(38, 65, 67, 1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(2, 103, 124, 1) 20%, rgba(38, 65, 67, 1) 100%);
  background: linear-gradient(180deg, rgba(2, 103, 124, 1) 20%, rgba(38, 65, 67, 1) 100%);
}

HTML部分无需修改，保持原样即可。

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