html - 当它在 div 标签内时，如何使用 css 更改链接颜色和背景悬停？

Question

这是一个例子:

#dolls {
position: absolute;
left: 248px;
top: 31px;
width: 150px;
height: 65px;
z-index: 2;
text-align: center;
color: #8C6954;
font-size: 18px;
text-decoration:none;

<div id="dolls"><br><a href="dolls.html">Haunted Dolls</a></div>

我试图更改链接的颜色、悬停和悬停时的背景颜色，但它不起作用。我该怎么做？

Answer 1

使用a:hover 应用悬停效果

#dolls {
  position: absolute;
  left: 248px;
  top: 31px;
  width: 150px;
  height: 65px;
  z-index: 2;
  text-align: center;
  color: #8C6954;
  font-size: 18px;
  text-decoration: none;
}
div a:hover {
  background-color: black;
  color: white;
  font-weight: bold;
}

<div id="dolls">
  <br><a href="dolls.html">Haunted Dolls</a>
</div>
<a href="anotherLink">Some other link</a>