CODEWITHSUNDEEP
jquery
Hyper
Hyper

Reputation: 337

Select element on hover

I need to allocate element on a hover effect, but I had a problem:

$('html *')
.on('mouseover', function(){
    $(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(){
    $(this).removeClass('hint-mode_show-block');
})

This code allocates all parent elements although I need to select latest level

I need to get an effect as firebug or another browser inspector

Upvotes: 2

Views: 2494

Answers (3)

Peeyush
Peeyush

Reputation: 4838

Do like this:

Suppose your html looks like

<div id="big">
    <p id="big">Hello Big</p>
<div>
    <p id="inner">Inner</p>
    </div>
</div>

then you can do this:

$("html *").hover(function(e){
    e.stopPropagation();
   $(e.target).addClass('hint-mode_show-block');
},function(e){
e.stopPropagation();
    $(e.target).removeClass('hint-mode_show-block');
});

Working fiddle:http://jsfiddle.net/fx2HP/

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

Use like this:

$('*')
.on('mouseover', function(e){
e.preventDefault();    
$(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(e){
e.preventDefault();    
$(this).removeClass('hint-mode_show-block');
})

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11303

In order to stop the bubbling you need to use event.stopPropagation():

$('html *')
.on('mouseover', function(event){
    event.stopPropagation();
    $(this).addClass('hint-mode_show-block');
})
.on('mouseout', function(event){
    event.stopPropagation();
    $(this).removeClass('hint-mode_show-block');
})

Upvotes: 1

Related Questions