Search jQuery

jQuery Forum

Hover Animate CSS css Tag "ul" "li" Clarification Question

in Using jQuery • 12 years ago

Just getting started with js/jquery but having trouble understanding how to integrate with my external .css file. This will be an easy question for an intermediate or experienced programmer.

Q: I simply want to add .hover to <li> items inside #siteLinks. What's the problem? (below)

// HTML
<div id="siteLinks">
<h4>Sitle Links</h4>
<ul>
<li><a "href=http://www.example.com">Example List Item 1</a></li>
<li><a href="http://www.adbusters.com">Example List Item 2</a></li>
</ul>
</div>
// CSS
body {
margin: 0px;
font-family: Helvetica;
font-size: 14px;
}
#siteLinks {
height: 480px;
width: 320px;
padding: 10px;
}
ul {
display: block;
padding: 5px
}
li {
display: block;
color: #000000
margin: 5px;
padding: 5px;
}
.hoverOn {
background-color: #000000
color: #FFFFFF
display: block
}
// jQuery Javascript
$(document).ready(
function() {
$('li').hover(
function() {
$(this).addClass('hoverOn');
},
function() {
$(this).removeClass('hoverOn');
}
);

Most likely the problem is with $(li).hover,

and/or missing the period(.) in (".hoverOn")

Or do I need to define more specific CSS for tags <ul li>, <li a>, <li a:hover>

Finally - I will be able to add .toggle (copy from .hover)

******** I'd greatly appreciate your assistance. Thanks!

John

Replies(3)

superfici..

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

12 years ago

$(function () {
$('#siteLinks li').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hoverOn');
});
});

should work

nadahater

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

12 years ago

Thanks Superficial. Your script worked, but I'd be grateful if you'd answer one more question:

I'm currently reading "Beginning Javascript and CSS Development with jQuery"; Wrox Publishing - The book example illustrates the use of jQuery's .hover method, which I tried to duplicate in my original script (above).

Q: Curious why my original script didn't work?

superfici..

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

12 years ago

$(document).ready(
function () {
$('li').hover(
function () {
$(this).addClass('hoverOn');
},
function () {
$(this).removeClass('hoverOn');
}
);
});

this is a working version of your code.

seems there were a few ")" missing at the end.

Top Reply

Response title

Attachments

jQuery Forum

Hover Animate CSS css Tag "ul" "li" Clarification Question

Replies(3)

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

Re: Hover Animate CSS css Tag "ul" "li" Clarification Question

Statistics

Tags

Actions