在jQuery中仅选择整个CSS类的一个div [英] Selecting only one div of entire css class in jQuery

问题描述

我的目标是在div悬停在其上时显示该div上的覆盖图.普通div称为.circleBase.type1，覆盖层为circleBase.overlay.我的页面上有多个这些div.当我将鼠标悬停在一个.cirlceBase.type1上时，每个.circleBase.type1上都会显示叠加层.我该如何预防?

my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?

这是一些代码:

HTML

<div class="circleBase type1">
    <p class="hidetext">Lorem ipsum</p>
    <hr size="10">
    <strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
   <p class="date">11/12/14</p>
</div>

和jQuery

$(document).ready(function(){
    $('.overlay').hide();
    $('.date').hide();

    $(".circleBase.type1").mouseenter(function(){
        $(".overlay").fadeIn("fast");
        $('.date').show();
        $('.hidetext').hide();
    });

    $(".overlay").mouseleave(function(){
        $(this).fadeOut("fast");
        $('.date').hide();
        $('.hidetext').show();
    });
});

推荐答案

使用$(this)获取当前元素引用并执行以下操作:

Use $(this) to get current element reference and do like this:

$(".circleBase.type1").mouseenter(function(){
    $(this).next(".overlay").fadeIn("fast");
    $(this).next(".overlay").find('.date').show();
    $(this).find('.hidetext').hide();
});

和:

$(".overlay").mouseleave(function(){
        $(this).fadeOut("fast");
        $(this).find('.date').hide();
        $(this).prev(".circleBase").find('.hidetext').show();
    });

这篇关于在jQuery中仅选择整个CSS类的一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！