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

【问题标题】：Entire <div> hover and entire <div> clickable整个 <div> 悬停和整个 <div> 可点击
【发布时间】：2016-01-29 20:19:33
【问题描述】：

我正在尝试使整个 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>

【问题讨论】：

标签： css html hyperlink hover

【解决方案1】：

差不多了，只需制作 div:hover，而不是 a。试试这个

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

https://jsfiddle.net/vh7tctbh/

【讨论】：

【解决方案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>

【讨论】：