悬停时无法更改css中的背景图像[重复]
Posted
技术标签:
【中文标题】悬停时无法更改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;
【讨论】:
以上是关于悬停时无法更改css中的背景图像[重复]的主要内容,如果未能解决你的问题,请参考以下文章