悬停时无法在 css 中更改背景图片

Question

我的容器里有 6 个 col-lg-3。每个 div 包括另一个 div、h4 和 p。包含的 div 有 background-image，还有 CSS 中的一些属性。我想在悬停时更改包含 div background-image col-lg-3 div 但它只是忽略 :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 嵌套在之前未声明的 class 中 (.reasons)。除此之外，你应该在嵌套的div中声明.community class，这样图像将在代码中分离（更好的视图和更容易处理），然后，只需:hover 事件适用于 class，因此只要鼠标进入该区域，它就会触发该事件并更改背景。

这里有一个片段，可以更好地查看代码及其工作原理：

.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>

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

Answer 4

你试过 !important 了吗？

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

悬停时无法在 css 中更改背景图片

Cant change background image in css on hover

html

css

background

hover