悬停对css中不同类的影响

i want have a hover effect for all elements in the follow html class

我希望对跟随html类中的所有元素都有悬停效果

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>

The hover works on the text. The problem is, i can`t tell all elements like the icon or the header to take the hover effect at the same time.

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

5 个解决方案

#1

You cascade them down like this:

你把它们像这样级联：

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

Incidentally, this is why preprocessors like SASS and LESS are useful as you can declare your blocks this way:

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

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

Meaning you only have to describe the hover state once and can then chain all kinds of crazy styles from it to the children.

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

#2

This is due to some priority in your CSS rules, so in order to fix this you need to trigger all the elements one by one like this :

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

h4,
p {
  color: red;
}

.wrapper:hover p,
.wrapper:hover a,
.wrapper:hover h4 {
  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>

You may also use (*) to trigger all the element at the same time but it's not recommended if you will have more element inside the wrapper

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

.wrapper:hover *{
  color: white;
}

#3

You can either target all child nodes with the child combinator and * selector

您可以使用子组合子和*选择器来定位所有子节点

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

or target individual ones:

或针对个人：

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

or the less strict descendant combinator :

或者不太严格的后代组合子：

.wrapper:hover p {
  color: white;
}

Either way, to affect the descendants when hovering over a parent you must use the :hover selector on the parent and then select the descendants.

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

#4

Oh thanks a ton so far.

哦，非常感谢到目前为止。

i works nearly perfectly. I have only one issue:

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

i have tryed this code:

我试过这段代码：

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

and it works.

它的工作原理。

But if try to this with the background color it doesnt work:

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

Code

码

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

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

#5

-1

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

#1