CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
Plic Pl
Plic Pl

Reputation: 541

Make effect only on hovered element in JQuery. - Same classes

I have the following structure: 

<div class="box a">
    <div class="box b">
        <div class="box c">

        </div>
    </div>
    <div class="box d">

    </div>
</div>

Now I want to make the following: If I hover just over the largest box a, I want to make some effects on it, like opacity for example.

BUT, if I hover on box c (which is in box a and b) I only want to make the opacity effect on box c.

What I tried was:

$('.box').mouseenter(function(e) {
    e.stopPropagation();
    $(this).css({'opacity': 0});
}).mouseleave(function(e) {
    e.stopPropagation();
    $(this).css({'opacity': 1});
});

But this doesnt work. Does anyone know a solution?

I tried it with both, JS and CSS and both times couldnt figure it out. It would be really helpful to see both solutions here.

Upvotes: 0

Views: 191

Answers (3)

Green Wizard
Green Wizard

Reputation: 3667

it is because of the classes you have used. please see the following code

<div class="box1">
    <div class="box">
        <div class="box">

        </div>
    </div>
    <div class="box d">
     </div>
</div>

the following will be the jquery lines of code

$('.box').mouseenter(function(e) {
$(this).css({'opacity': 0});
});
$('.box').mouseleave(function(e) {
    $(this).css({'opacity': 1});
});

and the css 

.box{
    width:100px;
    height:100px;
    background:red;
}

Upvotes: 0

ucon89
ucon89

Reputation: 107

Try this to your script

$('.c').mouseenter(function(e) {
e.stopPropagation();
$(this).css({'opacity': 0});
}).mouseleave(function(e) {
    e.stopPropagation();
    $(this).css({'opacity': 1});
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You will need to use mouseover & mouseout

$('.box').mouseover(function (e) {
    e.stopPropagation();
    $(this).css({
        'opacity': .25
    });
}).mouseout(function (e) {
    e.stopPropagation();
    $(this).css({
        'opacity': 1
    });
});

Demo: Fiddle

Why, look at the mdn documentation for mouseenter and mouseleave

Upvotes: 3

Related Questions