CODEWITHSUNDEEP
jquery
user1831677
user1831677

Reputation: 211

jQuery's mouseenter instead of on('mouseenter')

Hi I want to know how I can duplicate the following behaviour using jQuery's shortcut method of mouseenter apposed to using mouseenter via the on() jQuery method.

basic code below: html 

<dl>
    <dt>tab 1</dt>
    <dd>info.</dd>
    <dt>tab 2</dt>
    <dd>info.</dd>
    <dt>tab 3</dt>
    <dd>info.</dd>
</dl>

jQuery - 

$('dl').on('mouseenter', 'dt', function() {
    $(this)
        .next()
            .slideDown(200)
});

so the above behaviour where only the 'dt' elements are in the jQuery collection using the below shortcut.

$('dl').mouseenter(function() {
    $(this)
        .next()
            .slideDown(200)
});

jsfiddle:

http://jsfiddle.net/3ZWsS/

thanks

Upvotes: 0

Views: 93

Answers (2)

rynhe
rynhe

Reputation: 2529

You can use this too

$('dl').find('dt').mouseenter(function () {
   $(this).next().slideDown(200)
});

Live Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Since you are targeting dt elements under dl element, you need to use the descendant selector

$('dl dt').mouseenter(function () {
    $(this).next().slideDown(200)
});

Demo: Fiddle

Upvotes: 1

Related Questions