如何使用Javascript在元素上用鼠标悬停显示悬停？

我正在使用一个Javascript来显示鼠标悬停时的悬停。如何使用Javascript在元素上用鼠标悬停显示悬停？

这里是我的Javascript代码：

<script> 
$(document).ready(function(){ 
$('.playlogo').mouseover(function() { 
    $('.company-image-overlay').show(); 
}).mouseout(function() { 
    $('.company-image-overlay').hide(); 
}); 
}); 
</script>

这里是我的html：

<li class="playlogo"><a href="videos/[blkfeatured_videos.indexer;block=div]/[blkfeatured_videos.title_seo;htmlconv=no;block=div]"><img src="./uploads/player_thumbs/[blkfeatured_videos.video_id;block=div].jpg" title="<!--[blkfeatured_videos.title;htmlconv=no;ope=max:50;maxhtml;block=div;comm]-->"/></a><div class="company-image-overlay"></div></li>

我有这个页面上许多<li class="playlogo">元素。

这里是CSS代码：

.company-image-overlay { 
    width: 160px; 
    height: 160px; 
    background: transparent url(/images/play.png) no-repeat; 
    border-radius: 15px; 
    z-index: 1; 
    opacity: 0.5; 
    position: absolute; 
    top: 0.5em; 
}

现在的问题是，当我将鼠标放置到一个<li class="playlogo">它显示与<li class="playlogo">所有其他元素悬停效应。

现在的问题是 - 我怎样才能让Javascript显示悬停只在我用鼠标悬停的那一个元素上？

在此先感谢！

来源

2013-10-28 Tonny Struck

您需要参考this并获得其孩子：

$(this).find('.company-image-overlay').show();

来源

2013-10-28 17:16:05

由于它的作品！但没有其他问题。现在它显示的悬停没有悬停的元素，但是当我徘徊两次它变得okey。我如何解决这个错误？ –

@TonnyStruck在你的css中添加'.company-image-overlay'一个'display：none;' –

非常感谢你现在的工作！ –

你需要引用你徘徊在特定.playlogo，然后用.children()从上下文中遍历。 *我使用.children()，因为我们只遍历一个级别。这里有一个工作示例：

http://jsfiddle.net/jr6Vn/

$('.playlogo').each(function() { 
    $(this).mouseover(function() { 
     $(this).children('.company-image-overlay').show(); 
    }); 
    $(this).mouseout(function() { 
     $(this).children('.company-image-overlay').hide(); 
    }); 
});

来源

2013-10-28 17:21:18

也许能够用CSS来实现这一目标

.company-image-overlay{ 
    display:none; 
} 

.playlogo:hover .company-image-overlay{ 
    display:inherit; 
}

来源

2013-10-28 17:26:29 Ben

如何使用Javascript在元素上用鼠标悬停显示悬停？

回答

相关问题