Question

我有多个盒子，我想对每个盒子应用悬停效果，当我将鼠标悬停在单个盒子上时，所有其他盒子应该显得更透明，从而产生更强的聚焦效果。我需要通过某种缓慢的过渡效果来实现它。

我试图按照以下方式进行操作，但似乎效果不佳

<div class="container">
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>  
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
 <div>

.container {
    width: 400px;
    overflow: auto;
}

.thumb {
    width:100px;
    height:100px;
    background: #000;  
    display: inline-table;
    margin: 10px;
}

$(function() {
    $('.thumb').hover(function () {
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').css({"opacity":"1"});
    });
});

任何想法，为什么我的代码无效？

Answer 1

不需要javascript来实现这一点，纯css会做：

.container:hover .thumb {
    opacity: .5;
}

.container:hover .thumb:hover {
    opacity: 1;
}

和示范小提琴：http://jsfiddle.net/pPWgq/

修改
和过渡：http://jsfiddle.net/pPWgq/1/

刚刚添加了这个：

.thumb { ... transition: opacity 1s; }

Answer 2

我在原始解决方案中注意到的唯一真正问题是，当您快速从一个项目移动到另一个项目时，有时正在运行的动画会导致问题。这是你想要解决的问题吗？如果是这样，您可以放置stop()来停止动画。

试试这个：http://jsfiddle.net/rSNS5/4/

$(function() {
    $('.thumb').hover(function () {
      $('.thumb').stop();
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').stop().css({"opacity":"1"});
    });
});

悬停在多个盒子上的效果

2 个答案: