views:

32

answers:

2

The whole page is a PHP include inside of a main index file. Should I be placing the javascript on the main page? or an external javascript file? Am I referencing the li wrong?

<ul>
<li class="about"><a href="index.php?about"><h1>about</h1></a></li>
<li class="team"><a href="index.php?team"><h1>team</h1></a></li>
<li class="training"><a href="index.php?training"><h1>training </h1></a></li>
<li class="courses"><a href="index.php?courses"><h1>courses</h1></a></li>
<li class="register"><a href="index.php?contact"><h1>contact</h1></a></li>
</ul>

<script type="text/javascript">
$("div").hover(
function () {
$(this).addClass("navhover");
},
function () {
$(this).removeClass("navhover");
}
); 
</script>

(external CSS page)

<script type="text/css">
#center .navhover {
   background:  url(images/active.jpg) no-repeat center center; 
}

#center .about {
 background: url(../images/about.jpg) no-repeat center center;
}
A: 
<script type="text/javascript" src="script.js"></script>
<script>
$(function(){
    $("ul li").hover(function () {
          $(this).addClass("navhover");
        },function () {
          $(this).removeClass("navhover");
        }
    ); 
});

</script>
<ul>
<li class="about"><a href="index.php?about"><h1>about</h1></a></li>
<li class="team"><a href="index.php?team"><h1>team</h1></a></li>
<li class="training"><a href="index.php?training"><h1>training </h1></a></li>
<li class="courses"><a href="index.php?courses"><h1>courses</h1></a></li>
<li class="register"><a href="index.php?contact"><h1>contact</h1></a></li>
</ul>

i just tried this myself and it worked perfectly

Breezer
no luck is it because they are li? i tried switching the div to the li no luck
awesomeUser475853
i edit the answer and it works... have you included the jquery library?
Breezer
still had problems with it, had the jquery library, went with the straight css
awesomeUser475853
+1  A: 

Why not just skip the javascript and use


li.about {
    background: url(../images/about.jpg) no-repeat center center;
}

li.about:hover {
    background:  url(images/active.jpg) no-repeat center center;
}

?

MrMisterMan
worked like a charm thanks
awesomeUser475853