Question

我创建了两个div（topNavLinks和bottomNavLinks），两个div都包含一些链接。页面上每个链接的悬停属性设置为黑色。我想知道如何为这两个div设置不同的悬停颜色？

<!doctype html>
<html>
<head>
<title>Home</title>
<style>
body {
font-family:"Myriad Pro";
}

#topNavLinks {
background-color:#D5D5D5;
color:#1F8F3C;
font-size:20px;
padding:20px;
margin-bottom:20px;
}

#bottomNavLinks {
background-color:#2B88B5;
color:#FFFFFF;
padding:20px;
}

a:link, a:visited {
color:inherit;
padding:inherit;
text-decoration:none;
}

a:hover, a:active {
color:#0E0E0E;
}
</style>
</head>

<body>

<div id="topNavLinks">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
</div>

<div id="bottomNavLinks">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
</div>

</body>
</html>

Answer 1

喜欢这个

  #topNavLinks a:hover{/*do something*/}
  #bottomNavLinks a:hover{/*do something*/}

Answer 2

#topNavLinks a:hover{
}

#bottomNavLinks a:hover{
}

如何在HTML页面中设置不同元素的不同悬停属性？

2 个答案: