[英]Hover effect with jQuery to affect container div
我有以下jQuery 演示 : http : //jsfiddle.net/FTERP/
目前,当我将鼠标悬停在蓝色框上时, steve
div中的img
淡出。
是否有可能当我将鼠标悬停在蓝色框(' john ')上时,整个红色区域(' 容器 ')的不透明度下降到0.4 ,但蓝色框仍然是100%蓝色?
这是我的HTML:
<div id="container">
<div id="john" class="character normalClassName1">
<a href="#" id="link1"> </a>
</div>
<div id="steve" class="character">
<img src="http://placehold.it/400x400" />
</div>
</div>
使用Javascript:
$(function() {
$('#john').mouseenter(function() {
$(this).addClass('hoverClassName1');
$('.character[id!=john]').css({opacity:0.5});
var button = $(this).find('.button');
button.html('View more');
}).mouseleave(function () {
$('.hoverClassName1').removeClass('hoverClassName1');
$('.character').css({opacity:1});
$('.button').html('View');
});
});
CSS:
#container {width:100%;background:red;float:left;height:450px}
#john {position:relative;margin-top:-80px;margin-left:0px;background:blue;height:380px;float:left;width: 495px;}
#john div {margin-left:250px;width:180px;height:float:left;margin-top:205px}
#john div p {color:#074471;font-weight:bold;font-size:13px;margin-left:20px;}
#steve img {float:left}
#link1 {background:transparent;position:absolute;top:0px;left:0;width:100%;height:100%;z-index:1}
.normalClassName1 {width:495px!important;z-index:3;}
.hoverClassName1 {width:495px;z-index:4!important}
不透明度将始终影响所有子元素。
如果您只是尝试淡出纯色背景颜色,则可以使用带有alpha通道的颜色,例如rgba()
或hsla()
,但是:
#container.test {
background: rgba(255, 0, 0, 0.5); /* 0.5 = 50% transparency */
}
$(function() {
$('#john').mouseenter(function() {
$('#container').addClass("test");
}).mouseleave(function () {
$('#container').removeClass("test");
});
});
在你的mouseenter调用put
$('#container').css({'opacity' : '.4'});
您将需要将其他2个div移出容器div来执行此操作,因为它会影响所有子项,您可以将其设置为绝对值,然后将其他2个div移到其上面。 它很脏但会起作用。
不,除非孩子放在它的容器外面,否则它是不可能的。 选项:
像其他答案一样使用rgba()
,但它并不能使它完全透明;
使用.png
img,并在悬停时将其替换为透明的。 喜欢:
$('selector').hover( function () { $(this).parent().css("background-image", "url('transparent.png')"); }, function () { $(this).parent().css("background-image", "url('normal.png')"); } );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.