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

我有多个图像，悬停在特定图像上，我只想应用于该图像，它不应该影响其他图像。如何在悬停我的鼠标的图像上显示悬停效果

更多的解释： 在这个例子中（http://codepen.io/anon/pen/AnsqI），假设我有多个图像&想申请上只图像，其中i掀掉我的鼠标了一定的效果。

我使用class属性...

<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.$('.grid_content').fadeOut();），但没有奏效。

有人请帮助我。

来源

2014-02-05 Ashutosh Singh

只是为了澄清，它看起来并不像你所定义'$ this'。为了得到一个jQuery对象，使用'$（this）'。显然，这不是主要问题，但知道这很好！ – j6m8

使用此：

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

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

来源

2014-02-05 20:02:58 DaniP

谢谢！测试，然后让你知道 –

@Sundara检查演示发布 – DaniP

@Sundara你是什么意思的小时尚？ – DaniP

有2种方式来做到这一点。您可以使用该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(); 
});

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

来源

2014-02-05 20:08:21 pedrozath

你可以考虑使用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/

来源

2014-02-05 20:52:40 dward

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

回答

相关问题