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