如何使用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在元素上用鼠標懸停顯示懸停？

回答

相關問題