0

我目前正在研究一种 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 显示只悬停在我现在用鼠标悬停的一个元素上？

提前致谢！

4

3 回答 3

0

您需要引用.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-28T17:21:18.263 回答
0

您需要参考this并获取其子项：

$(this).find('.company-image-overlay').show();
于 2013-10-28T17:16:05.563 回答
0

可能能够用 CSS 完成这个

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

.playlogo:hover .company-image-overlay{
     display:inherit;
}
于 2013-10-28T17:26:29.423 回答