jQuery悬停效果影响容器div答案

【问题标题】：Hover effect with jQuery to affect container divjQuery悬停效果影响容器div
【发布时间】：2013-04-30 13:29:21
【问题描述】：

我有以下 jQuery Demo：http://jsfiddle.net/FTERP/

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

是否有可能当我将鼠标悬停在蓝色框（'john'）上时，整个红色区域（'container'）的不透明度降至 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}

【问题讨论】：

您的“not john”选择器可能会更简洁：.character:not(#john)

标签： javascript jquery html css hover

【解决方案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/

【讨论】：

非常感谢您的快速回复。出于兴趣，如果我要使用背景图像而不是背景颜色，我将如何测试它？
@michaelmcgurk 如果你想要一张背景图片，你需要两个文件——一个是普通的 png，一个是透明的 png。 Javascript 只是添加/删除类名，所以交换图像的方式与我在演示中使用 css 处理颜色的方式相同。
^ 正是我刚刚所做的。我之前实际上已经尝试过这种方法 - 完美的答案，xec - 谢谢！

【解决方案2】：

在你的 mouseenter 调用中放置

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

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

【讨论】：

感谢提及“它很脏”
另外一个更简洁的工作是创建 2 个 png 文件，一个具有 100% 的不透明度，另一个具有 40% 的不透明度，然后将图像切换为背景。这也是最不脏的方法，并且保证适用于所有浏览器。

【解决方案3】：

不，这是不可能的，除非孩子们位于它的容器之外。选项：

像其他答案一样使用rgba()，但不能完全透明；

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

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

【讨论】：