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

我假设你不想改变盒子的背景，如果你将鼠标悬停在盒子本身上，但只有当你将鼠标悬停在锚点上时才会改变。

如果您更改这样的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 示例，展示了它的工作原理

Answer 2

以下是LIVE DEMO如何运作

CSS：

.box{
  background: gray;
  width: 50px;
  height: 50px;
  padding: 100px;
}

.box:hover{
  background: yellow;
}

CSS整个div悬停

2 个答案: