CSS 整个 div 悬停

Question

我正在显示带有一类框的多个 dib

这是我的 CSS

.box {
  width:100%;
  min-height:20px;
  color:#000000;
  font-size:16px;
  border:1px solid #666666;
}
.box a {
   color:#000000;
   font-size:16px;
   text-decoration:underline;
}
.box a:hover {
   background:#666666;
}

如何使整个 div 在悬停时具有背景色？

Answer 1

如果您将鼠标悬停在框本身上，我假设您不想更改框的背景，但前提是您将鼠标悬停在 anchor 上。

如果你像这样改变 div 是可能的。

HTML

<div class="container">
    <a href="#">Link</a>
    <div class="box"></div>
</div>

CSS

.container {
    overflow: hidden;
}
.container .box {
  width:100%;
  min-height:20px;
  color:#000000;
  font-size:16px;
  border:1px solid #666666;
}
.container a {
   color:#000000;
   font-size:16px;
   text-decoration:underline;
   float: left;
}
.container a:hover + .box {
   background:#666666;
}

这是一个 JSFiddle 展示其工作原理的示例