我想在将鼠标悬停在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>