Question

我的容器中有6个col-lg-3。每个div包括另一个div，h4和p。包含的div具有background-image和CSS中的某些属性。我想在悬停background-image div上更改包含的div col-lg-3 但是它只是忽略:hover而没有任何反应。

我不仅尝试更改background-images，而且尝试更改color，添加borders等，但是没有响应。这是div.col-lg-3 ...

之一

.reasons .col-lg-3 div {
  width: 99px;
  height: 99px;
  margin: 10px auto 5px auto;
  background-size: 99px 99px;
  background-repeat: no-repeat;
  transition: 0.5s ease;
}

.community:hover div {
  background-image: url('img/communityReverse.png');
}

<div class="col-lg-3 community">
  <div style="background-image: url('img/community.png')"></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.community:hover div{ ... }似乎不起作用，但是例如.community:hover h4{ font-size: 30px; }没问题。我看不出有什么问题

Answer 1

您检查此代码是否使用了错误的代码

.community div:hover 
 {
    background-image: url('img/communityReverse.png');
 }

Answer 2

您需要在代码中使用!important，否则您会做得很好

.reasons .col-lg-3 div {
  width: 99px;
  height: 99px;
  margin: 10px auto 5px auto;
  background-size: 99px 99px;
  background-repeat: no-repeat;
  transition: 0.5s ease;
}

.community:hover div {
  background-image: url('img/communityReverse.png') !important;
}

<div class="col-lg-3 community">
  <div style="background-image: url('img/community.png')"></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Answer 3

您的CSS遇到了问题，因为您试图将div嵌套在之前未声明的类（.reasons）中。除此之外，您应该在嵌套的div中声明.community类，这样图像将在代码上分开（更好的视图并且更易于处理），然后只需应用:hover事件即可该类，因此每当鼠标进入该区域时，它将触发事件并更改背景。

这里有一个片段，用于更好地查看代码及其工作方式：

.community div {
  width: 100%;
  height: 99px;
  margin: 10px auto 5px auto;
  background-image: url("http://www.f-covers.com/cover/cute-baby-kitten-facebook-cover-timeline-banner-for-fb.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.5s ease;
}

.community:hover div {
  background-image: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/cats/lovely-american-shorthair-kitten-website-header.jpg");
}

<div class="col-lg-3 community">
  <div></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

顺便说一句，当您只想使用常规样式时，不必指定嵌套类，因为.community与.col-lg-3嵌套为同级，您可以使用其中一种来更改内部就像我在上面的代码段中所做的一样。

Answer 4

您尝试过！重要吗？

.community:hover div {
  background-image: url('img/communityReverse.png')!important;
}

无法将css悬停在css中更改背景图像

4 个答案: