Question

几天来，我一直在努力解决这个问题。我的主页面总共有6个DIV类，我想做一个简单的效果，当其中一个DIV类正在悬停时，另外5个DIV类将变得轻微透明。

我尝试了一些方法，但似乎没有用。谁能帮我这个？非常感谢！！

Answer 1

尝试：

$(".test").hover(function() {
    $(".test").not($(this)).css({"opacity" : 0.1});
},
 function() {
     $(".test").css({"opacity" : 1});
});

请参阅：jsFiddle

Answer 2

更新：我第一次误解了你的问题。改进了答案。

我不知道你确切的html设置，但这样的事情应该可以解决问题：

jQuery(".myDivClass").mouseenter(function(){
    jQuery(this).siblings().css({"opacity": 0.7});
}).mouseleave(function(){
    jQuery(this).siblings().css({"opacity": 1});
});

working fiddle here

Answer 3

您可以尝试类似的事情;

$(".mydiv").mouseenter(function() {
  var currentId = $(this).attr('id');
$("div").not(this).css("background-color", "#7EA9D5");
  }).mouseleave(function() {
$(".mydiv").css("background-color", "#06C");
  });

您可以使用单个班级和不同的ID。为透明颜色赋值（或者可以使用CSS opacity） Here 是一个有效的实时演示。（我在这里使用了颜色）

Answer 4

你应该只使用CSS获得更好的表现：Demo (jsfiddle)

.container > div {
    background: #0FF;
}
.container:hover > div {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.container:hover > div:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

将一个DIV类和其他5个DIV类改为透明

4 个答案: