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](http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery) — vch, Aug 15 '14 at 17:11
So you're wanting to simply have the overlay show on hover? Is that correct? — OneHoopyFrood, Aug 15 '14 at 17:23

Ehsan Sajjad · Accepted Answer · 2014-08-15T17:31:52.407

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 '14 at 17:31

answered Aug 15 '14 at 17:10

Ehsan Sajjad

61,834
16
105
160

@williamukoh ``this`` will give you the current element reference which generated event not all with "circleBase" class – Ehsan Sajjad Aug 15 '14 at 17:14

score 0 · Answer 2 · edited Aug 15 '14 at 17:18

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 '14 at 17:18

Sanjay Dutt

2,192
16
16

answered Aug 15 '14 at 17:09

Paulo

172
6

score 0 · Answer 3 · answered Aug 15 '14 at 17:43

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.

Selecting only one div of entire css class in jQuery

3 Answers3

Linked