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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

几乎就在那里，只做div：悬停，而不是a。试试这个

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

https://jsfiddle.net/vh7tctbh/

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

2 个答案: