如何在悬停div时更改跨度样式？答案

【问题标题】：How to change span style while hovering a div?如何在悬停div时更改跨度样式？
【发布时间】：2017-02-26 22:15:11
【问题描述】：

我试图在悬停在 div 上时更改 span 的样式，悬停时的这个 div 也应该改变它的颜色。

这是我目前的代码（div的bg改变了，但是span的颜色没有，为什么？）：

<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div:hover{
            background-color: blue;
        }
        span{
            color: blue;
        }
        div:hover span{
            color: green;
        }
    </style>
</head>
<body>

<div></div>
<span>WHY</span>

</body>
</html>

任何帮助将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

您需要将span 标签放在div 内。像这样的：

div{
    width: 200px;
    height: 200px;
    background-color: red;
}
div:hover{
    background-color: blue;
}
span{
    color: blue;
}
div:hover span{
    color: green;
}

<div>
  <span>span text</span>
</div>

【讨论】：

OP 要求在将鼠标悬停在 div 上时更改跨度文本的颜色。
我并不是说您的回答没有解决问题，但您已经更改了标签的形成，在它们是两个单独的标签之前，在您的解决方案中它是父子标签。
@frnt 我不认为这是一个案例。 OP 有 2 个选项，一个用于更改 html 标签，一个用于更改 css。我用过第一个，继续用css。您的答案可能使用第二个。
好的，但是阵型改变了。无论如何，Op 确实是解决方案，希望它能解决他的问题 :-)

【解决方案2】：

您可以在 CSS 中使用 + 选择器，如下所示：

div:hover + span {
    color: green;
}

这里是JSFiddle的链接。

【讨论】：

【解决方案3】：

如果你想使用 JQuery。这可能会对您有所帮助。

$('div').hover(function(){
  $("span").css("background-color","red");
})

【讨论】：

不涉及 jQuery 标签。