将鼠标悬停在操作不适用于 Div 标签中的所有元素答案

【问题标题】：Hover over action not working on all elements in Div tag将鼠标悬停在操作不适用于 Div 标签中的所有元素
【发布时间】：2018-09-27 07:56:33
【问题描述】：

下午好，

我正在努力将鼠标悬停在框上以更改 <a> 标记的颜色并更改 <img> 标记。

但是，当我将鼠标悬停在 <p> 标签上时，它确实会发生变化。

我已将它们全部插入到一个父 div 标记下。

有没有办法让它工作？

干杯，鲱鱼

【问题讨论】：

你能分享你的代码吗？
请分享您的代码
您好，欢迎来到堆栈溢出。请花点时间阅读stackoverflow.com/help/how-to-ask，如果您不提供任何代码，我们无法为您提供帮助，请您输入您的代码
我们无法猜测您的问题，您必须发布一些代码才能解决问题。

标签： html css hover

【解决方案1】：

试试这个

.divClassOrId:hover{
  background-color: red;
}

【讨论】：

【解决方案2】：

如果我不明白，你想为标签定义一个特征。为此，您需要从 css 进行操作。我会给你一个这样的示例代码。

<html>
<head>
<style>
div:hover {
    background-color: yellow;
}
div{
    background-color: green;
    width : 500px;
    height: 500px;
}
</style>
</head>
<body>
    <div>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>

    </div>
</body>
</html>

【讨论】：

【解决方案3】：

如果您尝试将一个 div 悬停并仅突出显示另一个：

HTML：

<div class="class">
    <div class="childClass">Test</div>
</div>

CSS：

.class:hover + .childClass {
    background-color: blue;
}

.childClass {
    background-color: red;
}

如果父级悬停，这将修改子级

您也可以使用：

.class:hover ~ childClass {
    backgroud-color: blue;
}

【讨论】：