用jQuery懸停效果來影響容器div

Question

我有以下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">&nbsp;</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}

Answer 1

不透明度將始終影響所有子元素。

如果您只是嘗試淡出純色背景顏色，則可以使用帶有alpha通道的顏色，例如rgba()或hsla() ，但是：

CSS

#container.test {
    background: rgba(255, 0, 0, 0.5); /* 0.5 = 50% transparency */
}

JavaScript的

$(function() {
    $('#john').mouseenter(function() {
        $('#container').addClass("test");
    }).mouseleave(function () {
        $('#container').removeClass("test");
    });
});

http://jsfiddle.net/FTERP/2/

Answer 2

在你的mouseenter調用put

$('#container').css({'opacity' : '.4'});

您將需要將其他2個div移出容器div來執行此操作，因為它會影響所有子項，您可以將其設置為絕對值，然后將其他2個div移到其上面。 它很臟但會起作用。

Answer 3

不，除非孩子放在它的容器外面，否則它是不可能的。 選項：

1. 像其他答案一樣使用rgba() ，但它並不能使它完全透明;

2. 使用.png img，並在懸停時將其替換為透明的。 喜歡：

    $('selector').hover( function () { $(this).parent().css("background-image", "url('transparent.png')"); }, function () { $(this).parent().css("background-image", "url('normal.png')"); } );