当链接位于 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>

Answer 2

尝试这个

CSS

#dolls a:hover{
    color:white;
    background:red;
}

Answer 3

将#dolls放在a:hover {前面，只使#dolls中的a获得悬停效果。

#dolls a:hover {
    color:blue; // color of text
    background-color: green; // background color
}

Answer 4

您可以使用伪类hover和link

a:hover {
// css code
}
a:link {
// css code
}