0

私は現在、マウスオーバー時にホバーを表示する1つの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">です。

問題は、現在マウスでホバーしている 1 つの要素だけに Javascript をホバー表示させるにはどうすればよいかということです。

前もって感謝します！

4

3 に答える 3

0

.playlogoホバリングしている特定のものを参照し、.children()そのコンテキスト内からトラバースするために使用する必要があります。* 使用して.children()いるのは、1 つのレベルのみをトラバースするためです。これが実際の例です：

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 に答える