Selecting only one div of entire css class in jQuery

Question

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?

Here is some code:

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>

and 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();
    });
});

Pass event to the mouseenter and mouseleave and see if event.target can't help. See this — vch
– vch, Commented Aug 15, 2014 at 17:11
So you're wanting to simply have the overlay show on hover? Is that correct? — OneHoopyFrood
– OneHoopyFrood, Commented Aug 15, 2014 at 17:23

Ehsan Sajjad · Accepted Answer · 2014-08-15 17:31:52Z

2

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();
});

and:

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

edited Aug 15, 2014 at 17:31

answered Aug 15, 2014 at 17:10

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ehsan Sajjad Over a year ago

@williamukoh this will give you the current element reference which generated event not all with "circleBase" class

Sanjay Dutt · Accepted Answer · 2014-08-15 17:18:08Z

0

usually when I want to target something specific you just give it an ID.

ID's play better in JavaScript than classes.

If you had a specific container, using the container as your starting point is a good route as well

$('#container').find('.something.type1').doSomething();

This is much more efficient for jquery, because it only searches .something.type1 inside of #container.

edited Aug 15, 2014 at 17:18

Sanjay Dutt

2,22218 silver badges16 bronze badges

answered Aug 15, 2014 at 17:09

Paulo

1706 bronze badges

Comments

OneHoopyFrood · Accepted Answer · 2014-08-15 17:43:34Z

Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.

The HTML should look like this:

<div class="circleContainer">
    <div class="circleBase">
        <p>Lorem ipsum</p>
        <hr>
        <strong class="gray">gdroel</strong>
    </div>
    <div class="overlay" style="display: none;">
       <p class="date">11/12/14</p>
    </div>
</div>

so your js can look like this:

$(function(){
    $(".circleContainer").mouseenter(function(){
        $(this).find(".overlay")
        $(this).find('.circleBase').hide();
    });

    $(".circleContainer").mouseleave(function(){
        $(this).find('.circleBase').show();
        $(this).find(".overlay").hide();
    });
});

Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.

Collectives™ on Stack Overflow

Selecting only one div of entire css class in jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related