Question

我在按钮悬停时尝试更改div颜色。如果按钮出现在div之外，代码工作，但我需要在同一个div中的按钮？

代码：

＆＃13;

.card {
  height: 20em;
  width: 10em;
  border: 1px solid #222;
}

.btn {
  position: absolute;
  bottom: 0;
}

.btn+.card {
  background-color: black;
}

＆＃13;

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
  <button class="btn btn-primary">Hover me</button>
</div>

＆＃13;

Answer 1

请按照以下代码进行尝试。

.card {
  height: 20em;
  width: 10em;
  border: 1px solid #222;
}

.btn {
  position: absolute;
  bottom: 0;
}

.card>div {
  height: 100%;
}

.btn:hover+div {
  background-color: black;
}

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
  <button class="btn btn-primary">Hover me</button>
  <div></div>
</div>

Answer 2

没有父选择器。 https://css-tricks.com/parent-selectors-in-css/

你可以用jQuery（一个javascript库）完成这个。

＆＃13;

$('.btn').hover(function() {
  $(this).closest('.card').addClass('hover');
}, function() {
  $(this).closest('.card').removeClass('hover');
});

＆＃13;

.hover {
  background: black;
}

.card {
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
  <button class="btn btn-primary">Hover me</button>
</div>

＆＃13;

Answer 3

您可以选择组合子，即.card .btn并编写悬停逻辑。例如

.card .btn:hover,
.card .btn:active {
    background-color: "color name";
}

请检查：https://jsfiddle.net/Lrvsr0uf/

当鼠标悬停在同一个div中的按钮时，如何更改div背景颜色？

3 个答案: