css中不同类的悬停效果答案

【问题标题】：hover effect on different classes in csscss中不同类的悬停效果
【发布时间】：2018-03-30 11:18:29
【问题描述】：

我想为以下 html 类中的所有元素设置悬停效果

HTML

.wrapper:hover {
  color: white;
}

<div class="wrapper">
  <i class="fa fa-icon"> </i>
  <h4> Headertext </h4>
  <p> Some content text </p>
  <p> <a href="url"> text </a> </p>
</div>

悬停在文本上起作用。问题是，我不能告诉图标或标题等所有元素同时具有悬停效果。

【问题讨论】：

标签： html css hover

【解决方案1】：

到目前为止，非常感谢。

我工作得几乎完美。我只有一个问题：

我试过这个代码：

.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover a,
.wrapper:hover p {
color: white
}

它有效。

但是如果尝试使用背景颜色它不起作用：

代码

.wrapper:hover i,
    .wrapper:hover h4,
    .wrapper:hover a,
    .wrapper:hover p {
    color: white
    }

.wrapper:hover {
background-color:blue;
}

【讨论】：

【解决方案2】：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
      
        $(".wrapper").hover(function () {
            $(".wrapper").css("color", "white");
            $(".txt").css("color", "white");
        });
    });
</script>
</head>
<body>

<div class="wrapper">
  <i class="fa fa-icon"> </i>
  <h4> Headertext </h4>
  <p> Some content text </p>
  <p> <a class="txt" href="url"> text </a> </p>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

您可以使用 child combinator 和 * 选择器定位所有子节点

.wrapper:hover > * {
  color: white;
}

或针对个人：

.wrapper:hover > p {
  color: white;
}

或者不那么严格的descendant combinator ：

.wrapper:hover p {
  color: white;
}

无论哪种方式，要在将鼠标悬停在父级上时影响后代，您必须在父级上使用 :hover 选择器，然后选择后代。

【讨论】：

【解决方案4】：

你像这样把它们级联起来：

.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover p,
.wrapper:hover p {
   // some css here
}

顺便说一句，这就是为什么像 SASS 和 LESS 这样的预处理器很有用的原因，因为您可以通过这种方式声明您的块：

.wrapper {
  &:hover {
    i {
      // some css here
    }
    h4 {
      // some css here
    }
    p {
      // some css here
    }
  }
}

意味着你只需要描述一次悬停状态，然后就可以将各种疯狂的样式从它链接到孩子。

【讨论】：