如何更换悬停器?



我想在将鼠标悬停在p上时更改a字体大小颜色。它不起作用。可能有一个简单的解决方案,但我为此苦苦挣扎了几个小时。

如果有人没有与此主题相关的复杂链接,我也很乐意

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p:hover div nav a {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<a href="">One</a>
<a href="">Two</a>
<a href="">Three</a>
</nav>
</div>
</body>
</html>

嗨,我为您提供了简单的解决方案.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>


p:hover + .hv {

color: blue;
font-size: 22px;

}

</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
<a  href="">One</a>
<a  href="">Two</a>
<a  href="">Three</a>
</div>
</nav>
</div>
</body>
</html>

你好,好吧,如果我能得到你. 你想得到

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>


.hv a:hover{

color: blue;
font-size: 22px;

}


</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
<a  href="">One</a>
<a  href="">Two</a>
<a  href="">Three</a>
</div>
</nav>
</div>
</body>
</html>

尝试如下操作:p:hover, a:hover {color: blue;font-size: 22px;}

您的 CSS 选择器p:hover div nav a不正确。这将指悬停在<p/><div/><nav/>内的<a/>。您可以使用我在下面所做的更改来解决此问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
nav p { /*selects all hovered <p/> within a <nav/>*/
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<a href="">One</a>
<a href="">Two</a>
<a href="">Three</a>
</nav>
</div>
</body>
</html>

最新更新