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

Posted

技术标签:

【中文标题】悬停时无法更改css中的背景图像[重复]【英文标题】:Cant change background image in css on hover [duplicate] 【发布时间】:2019-10-11 14:51:56 【问题描述】:

我的容器中有 6 个col-lg-3。每个div 包括另一个divh4p。 包含的 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;

【讨论】:

以上是关于悬停时无法更改css中的背景图像[重复]的主要内容,如果未能解决你的问题,请参考以下文章

通过css悬停时更改背景[重复]

鼠标悬停时更改背景图像[重复]

更改链接悬停时的背景图像

在悬停其他元素时更改身体背景图像/渐变

jQuery在悬停时更改(带有淡入淡出动画)div的背景图像

CSS 背景位置更改 - Chrome 错误