Question

我有多张图片，在悬停在特定图像上时我只想在该图像上应用，它不应该影响其他图像。

更多说明： 在这个例子中（http://codepen.io/anon/pen/AnsqI），假设我有多个图像＆amp;想要仅在我移动鼠标的图像上应用特定效果。

我正在使用类属性...

 <script>
        $(function() { 
 //For grid view hover effect
        $('.grid_content').hide()
        $('.grid_container').hover(  
                // Over
                        function() {
                            $('.grid_content').fadeIn();
                        }
                ,
                        // Out
                                function() {
                                    $('.grid_content').fadeOut();
                                }
                        );
                        //--js for grid view hover effect ends here
        });

    </script>

我必须申请像$ this这样的东西，我尝试过（$this.$('.grid_content').fadeOut();），但它不起作用。

有人请帮助我。

Answer 1

使用此：

$('.container').hover(function(){
  $('.content',this).fadeToggle();
});

检查此演示http://codepen.io/anon/pen/BxbID

Answer 2

您可以考虑使用CSS和opacity属性（或display）。您也可以使用CSS3的transition属性逐步增强悬停效果。这里不一定需要JS，我只添加了五行CSS（无前缀）来达到同样的效果。

.content {
  width: 100%;
  height: 100%;
  background: rgb(255,255,255,0.9);
  padding: 5px 15px 10px 15px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .2s linear; /* CSS3 progressive enhancement */
}

.content:hover {
  opacity: 1;
}

根据您组织HTML的方式，您可能需要进行修改，但概念是相同的。

查看演示：http://jsfiddle.net/NeEuP/1/

Answer 3

有两种方法可以做到这一点。您可以使用此javascript关键字引用它并将其包含在jQuery函数中：

$('.grid_container').hover(function(){
  $(this).fadeIn();
, function(){
   $(this).fadeOut();
});

或者你可以：

$('.grid_container').hover(function(e){
   $(e.currentTarget).fadeIn();
, function(e){
   $(e.currentTarget)$(this).fadeOut();
});

...基本上你是通过事件对象获取元素的。我个人更喜欢这种方法，因为它更灵活，不依赖于实际范围（这取决于范围）。

如何在我悬停鼠标的图像上显示悬停效果

3 个答案: