0

我已经为此苦苦挣扎了几天。我的主页共有 6 个 DIV 类，我想做一个简单的效果，当其中一个 DIV 类悬停时，其他 5 个 DIV 类将变得略微透明。

我尝试了几种方法，但似乎没有用。谁能帮我这个？多谢！！

4

4 回答 4

2

尝试：

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

参见：jsFiddle

于 2012-09-09T07:55:00.300 回答
0

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

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

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

在这里工作小提琴

于 2012-09-09T07:52:32.537 回答
0

你可以尝试类似的东西；

$(".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）这是一个有效的 Live 演示。（我这里用了颜色）

于 2012-09-09T08:12:57.103 回答
0

您应该仅使用 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);
}
于 2012-09-09T08:32:46.800 回答