悬停时无法更改css中的背景图像[重复]

Posted 2023-03-06

【中文标题】悬停时无法更改css中的背景图像[重复]

【英文标题】：Cant change background image in css on hover [duplicate]

【发布时间】：2019-10-11 14:51:56

【问题描述】：

我的容器中有 6 个col-lg-3。每个div 包括另一个div、h4 和p。 包含的 div 有 background-image，以及 CSS 中的一些属性。 我想在悬停col-lg-3 div 上更改包含的 div background-image 但它只是忽略了: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; 好的，没问题。我看不出有什么问题

【参考方案1】：

您的 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 嵌套为同级，您可以像我一样使用其中一个来更改内部样式在上面的代码段中。

【参考方案2】：

你检查这个代码你正在使用错误的代码

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

【讨论】：

我需要在悬停的 div.community 块上更改 bg

【参考方案3】：

你需要在你的代码中使用!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>

【参考方案4】：

你试过 !important 吗？

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