Question

我试图在悬停在div上时改变跨度的样式，悬停时这个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>

任何帮助都会非常感激。

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

Answer 2

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

div:hover + span {
    color: green;
}

以下是JSFiddle。

的链接

Answer 3

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

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

如何在悬停div时改变跨度风格？

3 个答案: