整个 <div> 悬停和整个 <div> 可点击

Question

我正在尝试使整个 DIV 可点击并且整个 DIV 的背景在悬停状态下发生变化。为什么我的代码不起作用？

div.bottomLinks {
  display: block;
  padding: 10px;
}
div.bottomLinks a {
  display: block;
  background-color: #000;
  color: #FFF;
}
div.bottomLinks a:hover {
  display: block;
  background-color: #CCC;
  color: #000;
}

<a href="http://www.example.com">
  <div class="bottomLinks">
    Text for DIV link here
  </div>
</a>

Answer 1

就快完成了，只需制作 div:hover，而不是 a。试试这个

 div.bottomLinks:hover {
display: block;
background-color: #005596;
colour: #000;    
}

https://jsfiddle.net/vh7tctbh/

Answer 2

您的 CSS 规则是倒退的。您的 div 是锚点的子项，而不是相反。

div.bottomLinks {
  display: block;
  padding: 10px;
}
 a  div.bottomLinks{
  display: block;
  background-color: #000;
  color: #FFF;
}
 a:hover div.bottomLinks{
  display: block;
  background-color: #CCC;
  color: #000;
}

<a href="http://www.example.com">
  <div class="bottomLinks">
    Text for DIV link here
  </div>
</a>

或者您可以改为更改 HTML 并保留 CSS:

div.bottomLinks {
  display: block;
  padding: 10px;
}
div.bottomLinks a {
  display: block;
  background-color: #000;
  color: #FFF;
}
div.bottomLinks a:hover {
  display: block;
  background-color: #CCC;
  color: #000;
}

<div class="bottomLinks">
  <a href="http://www.example.com">Text for DIV link here</a>
</div>

整个 <div> 悬停和整个 <div> 可点击

Entire <div> hover and entire <div> clickable

html

css

hyperlink

hover