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

Question

我创建了两个 div（topNavLinks 和 bottomNavLinks）并且两个 div 都包含一些 link。页面上每个 link 的悬停属性设置为黑色。我想知道如何为两个 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 页面中设置来自不同元素的不同悬停属性？

How can i set different hover properties from different elememtns in an HTML page?

html

css

colors

hover