用jQuery悬停效果来影响容器div

I have the following jQuery Demo: http://jsfiddle.net/FTERP/

我有以下jQuery演示:http://jsfiddle.net/FTERP/

Currently when I hover over the blue box, the img inside steve div fades out.

目前,当我将鼠标悬停在蓝色框上时,steve div中的img会淡出。

Is it possible that when I hover over the blue box('john'), the whole red area ('container') opacity drops to 0.4, but the blue box remains 100% blue?

是否有可能当我将鼠标悬停在蓝色框('john')上时,整个红色区域('容器')的不透明度会降至0.4,但蓝色框仍然是100%蓝色?

Here is my HTML:

这是我的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}

3 个解决方案

#1

Opacity will always affect all children elements.

不透明度将始终影响所有子元素。

If you're only trying to fade out a solid background color, you can use colors with an alpha channel like rgba() or hsla(), however:

如果您只是尝试淡出纯色背景色,则可以使用带有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/

#2

in your mouseenter call put

在你的mouseenter call put中

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

You will need to move your other 2 divs out of the container div to do this because it effects all children, you could set it to a absolute and then move your other 2 divs on top of it. Its dirty but will work.

您将需要将其他2个div移出容器div来执行此操作,因为它会影响所有子项,您可以将其设置为绝对值,然后将其他2个div移到其上面。它很脏但会起作用。

#3

No, it's not possible unless children positioned outside it's container. Option:

不,除非儿童置于其容器外,否则不可能。选项:

1. using rgba() like other answer, but it is not make it transparent exactly;

   像其他答案一样使用rgba(),但它并不能使它完全透明;

2. Use .png img, and replace it with transparent one while hover. like:

   使用.png img,并在悬停时将其替换为透明的。喜欢:

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