CODEWITHSUNDEEP
javascriptjqueryhtml
eignhpants
eignhpants

Reputation: 1771

JQuery animate function only working on first child in a li

The following snippet of JQuery is only working on one li item in an ul. When I hover on the other items in the list it won't work. 

$(document).ready(function() {



$("#link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);

});
});

The html is as follows:

 <div class="col span_6 main-menu">
                    <ul>
                        <li><a id="link" href="about.php">About</a></li>
                        <li><a id="link" href="soon.php">Place</a></li>
                        <li><a id="link" href="soon.php">Shop</a></li>
                        <li><a id="link" href="blog.php">Blog</a></li>
                    </ul>
                </div>

Upvotes: 1

Views: 384

Answers (4)

adam
adam

Reputation: 240

"link" should be the class of the elements not the id. If you have more than 1 element with the same id, JavaScript will only find the first one.

Upvotes: 0

zplizzi
zplizzi

Reputation: 1006

An id (such as your id="link" should be unique - there should only be one element with the same id. Try changing these tags to class="link" and then using the selector $(".link").hover to select all of these elements.

Upvotes: 0

Matthew Rapati
Matthew Rapati

Reputation: 5696

ids should only be used once per page. You need to change 'link' to be a class:

$('.link')....

<a class="link">...

Upvotes: 0

void
void

Reputation: 36703

HTML 

   <div class="col span_6 main-menu">
                        <ul>
                            <li><a class="link" href="about.php">About</a></li>
                            <li><a class="link" href="soon.php">Place</a></li>
                            <li><a class="link" href="soon.php">Shop</a></li>
                            <li><a class="link" href="blog.php">Blog</a></li>
                        </ul>
                    </div>

Javascript

$(document).ready(function() {



$(".link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);

});
});

You should not use same id for more then one element

Upvotes: 2

Related Questions