<div id="navcontainer">
<ul>
<li class="roll"><a href=""><li class="roll"><a href="" news.php">News</a></li>
<li class="roll"><a href="" News</a></li>
<li class="roll"><a href="" Order</a></li>
<li class="roll"><a href="" Page Articles</a></li>
<li class="roll"><a href="" & Agendas</a></li>
<li class="roll"><a href="" Forms</a></li>
<li class="roll"><a href="" Reports</a></li>
<li class="roll"><a href="" Resources</a></li>
<li class="roll"><a href=""
<li class="roll"><a href="" List</a></li>
<li class="roll"><a href="" Site Offline</a></li>
<li class="roll"><a href="" Up Database</a></li>
</ul>
</div>
<script type="text/_javascript_">
$(document).ready(function() {
$("#navcontainer li").hover(function(){
$(this).removeClass("out").addClass("over");
},
function(){
$(this).removeClass("over").addClass("out");
});
});
</script>
About the HTML:
First, ID's must be unique throughout the entire page, so there can only be ONE element with an ID of "roll". Second, the only tag allowed within a <ul> is <li>, which makes your HTML invalid. The solution to these to is to simply remove all of the <div>'s in the <ul> and turn each <li> into <li class="roll">.
If the only thing that's ever going to be inside of <div id="navcontainer"> is that <ul> then you should consider something like this:
<ul id="navcontainer">
// links go here...
</ul>
because the <div> would be pretty unnecessary in that case.
About the _javascript_:
Going along with what Mungbeans said, the "over" and "out" classes are applied directly to the <li>s when you hover over one of them. I put the removeClass() in just to make sure that the two classes don't conflict with each other (a replaceClass function would really be handy for this sort of thing, though you might be able to use toggleClass() for this).
On 9/29/06, TJ <[EMAIL PROTECTED]> wrote:
Hi, I am trying to add a image rollover. I am applying it to a div before a li.
<div id="navcontainer">
<ul>
<div id="roll"></div><li><a href="" ">Home</A></li>
<div id="roll"></div><li><a href=""><div id="roll"></div><li><a href="" news.php?mode=edit">Edit News</a></li>
<div id="roll"></div><li><a href="" Order</a></li>
<div id="roll"></div><li><a href="" Page Articles</a></li>
<div id="roll"></div><li><a href="" & Agendas</a></li>
<div id="roll"></div><li><a href="" ">General Forms</a></li>
<div id="roll"></div><li><a href="" Reports</a></li>
<div id="roll"></div><li><a href="" Resources</a></li>
<div id="roll"></div><li><a href=""><div id="roll"></div><li><a href="" List</a></li>
<div id="roll"></div><li><a href="" Site Offline</a></li>
<div id="roll"></div><li><a href="" ">Back Up Database</a></li>
</ul>
</div>
Here is the jquery I am trying.
<script type="text/_javascript_">
$(document).ready(function() {
$("a").hover(function(){
$("div#roll").addClass("over");
},
function(){
$("div#roll").addClass("out");
});
});
</script>
Would this be right?
-TJ
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
