Question

我希望对跟随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>

悬停适用于文字。问题是，我不能告诉所有元素，如图标或标题，同时采取悬停效果。

Answer 1

你将它们像这样级联：

.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
    }
  }
}

这意味着你只需要描述一次悬停状态，然后可以将各种疯狂的风格链接到孩子身上。

Answer 2

您可以使用child combinator和*选择器

定位所有子节点

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

或针对个别目标：

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

或不太严格的descendant combinator ：

.wrapper:hover p {
  color: white;
}

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

Answer 3

这是由于CSS规则中的一些优先级，所以为了解决这个问题，你需要逐个触发所有元素：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您也可以使用（*）同时触发所有元素，但如果您在包装器中有更多元素，则不建议使用

.wrapper:hover *{
  color: white;
}

Answer 4

到目前为止，非常感谢。

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

我试过这段代码：

.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;
}

Answer 5

＆＃13;

<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>

＆＃13;

悬停对css

5 个答案: