[英]css class/property inactive after applying css method in jQuery
I have an html object which is something like a card. 我有一个类似卡片的html对象。 Here is my code: 这是我的代码:
<a class="card" href="/subjects/electronics.html" >
<div class="card_img" id="img_electronics"></div>
<h4>Electronics</h4>
<p class="card_description">Description</p>
<div class="line"></div>
<h5>GET STARTED</h5>
</a>
and my CSS: 和我的CSS:
.card_img{
width: 350px;
height: 200px;
background-size: 350px 200px;
}
#img_electronics{
background-image: url(/images/electronics.jpg);
}
The reason I specify the source of the image in the css is because I want to use a hover effect that creates color overlay on the image. 之所以在css中指定图像的来源是因为我想使用一种悬停效果来在图像上创建颜色叠加。 I have many cards with different image sources, so I use JS for the effect: 我有许多具有不同图像来源的卡,因此我使用JS来达到效果:
$(document).ready( function() {
$('.card').hover(
function(){
pic = $(this).find("[id^='img_']");
read_img_url = pic.css("background-image");
val_img_url = read_img_url.replace(/["']/g, "");
$(pic).css("background", "linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), " + val_img_url);
$(this).toggleClass('card_hover');
$(this).find('h5').toggleClass('h5_hover');
},
function(){
$(pic).removeProp("background");
$(pic).css("background-image", val_img_url);
$(pic).addClass('card_img');
$(this).toggleClass('card_hover');
$(this).find('h5').toggleClass('h5_hover');
});
});
At the beginning every image is displayed properly. 在开始时,每个图像都会正确显示。 However, after the first hover, the size of the image on the page remains the same, but only a small part of the actual image is there. 但是,在第一次悬停后,页面上图像的大小保持不变,但是实际图像只有一小部分。 The color overlay on hover works, though. 但是,悬停时的颜色覆盖有效。
I tried setting background: linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0)), url(/images/electronics.jpg);
我尝试设置background: linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0)), url(/images/electronics.jpg);
instead of background-image, but jQuery reads the property as empty string. 而不是背景图片,但jQuery将该属性读取为空字符串。 Any suggestions how to keep my whole image after hover? 关于悬停后如何保持我的整个形象有什么建议吗?
I think your current approach have problem because you use both gradient and image to "background" property. 我认为您当前的方法存在问题,因为您同时使用了渐变和图像作为“背景”属性。
You should use a mask to perform color overlay the image. 您应该使用遮罩对图像进行颜色叠加。 Something like: 就像是:
CSS: CSS:
.view {
width: 350px;
height: 200px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
}
.mask {
width: 350px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background: linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3));
}
.view:hover .mask {
opacity: 1;
}
.view img {
display: block;
position: relative
}
HTML: HTML:
<a class="card" href="/subjects/electronics.html" >
<div class="view">
<img src="/images/electronics.jpg" />
<div class="mask">
<h4>Electronics</h4>
<p class="card_description">Description</p>
<div class="line"></div>
<h5>GET STARTED</h5>
</div>
</a>
This approach use only CSS, you don't need Javascript to perform color overlay an image, I think it can boost your performance also. 这种方法仅使用CSS,您不需要Java脚本即可对图像进行颜色叠加,我认为它也可以提高性能。
Here is a resource with full demos and source code about color overlay: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ 以下是包含有关色彩覆盖的完整演示和源代码的资源: http : //tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
I hope this help. 希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.