CODEWITHSUNDEEP
javascriptonmouseout
Jamie
Jamie

Reputation: 2081

Onmouseover/out

Two issues I am having.

  1. The mouseover function is very FAST and it's definitely not working properly. I made a separate function for the onmouseout state, but it didnt help.
  2. The class changes properly, however it stays changed and doesn't go back to it's original class. It depends if the link is on the selected page. Any help would be GREATLY appreciated

JAVASCRIPT:

function changeRollover(rollover) {
    var rollItems = document.getElementById(rollover);
    var rollLinks = rollItems.getElementsByTagName('a');
    var noOfLinks = rollLinks.length;
    for (var r = 0; r < noOfLinks; r++) {
        var normalText = rollLinks[r].innerHTML;
        var rolloverText = rollLinks[r].title;
        var rolloverItem = document.getElementById(rollover);
        rolloverItem.innerHTML = "<a href='#' title='" + normalText + "'>" + rolloverText + "</a>";
        rolloverItem.class = rollover + "rollover";    
    }
}

HTML: 

<div class="nav">
    <ul id="NavItems">
        <li id="item0" class="selected"  onClick="changeClass(this.id)" 
                       onmouseover="changeRollover(this.id)">
            <a href="#" title="Shop Trends">Collections</a>
        </li>
        <li id="item1" onClick="changeClass(this.id)" 
                       onmouseover="changeRollover(this.id)">
            <a href="#" title="Shop Everything" >All Jewlery</a>
        </li>
        <li id="item2" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="Shop Press">As Seen On</a>
        </li>
        <li id="item3" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="fashion + shop">Collaborations</a>
        </li>
        <li id="item4" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="Shop Designer">Designer Pop Ups</a>
        </li>
    </ul>
    <div class="shipping">
        <a href="#">start your free orders today<br>
        *** click here for more information ***</a>
    </div>
</div>
<!-- .nav -->

Upvotes: 0

Views: 880

Answers (3)

Nivas
Nivas

Reputation: 18344

The problem is your onmouseover handler is on the lis. When the mouse hovers over the <a>s in the <li> and "reenters" onmouseover of the <li> is triggered again.

Example here: this is the same code as yours, I added some colors. If you move the mouse only on the black part (the <li>), the rollover happens as desired. But when you move the mouse on the green part (the <a>s).

As a solution, you can either handle the rollover on the <a>s or change your basic design (see @Thomas' answer)

Upvotes: 0

Thomas
Thomas

Reputation: 181705

The effect you want (dubious from a usability perspective, but that aside) is better achieved using some simple CSS:

#NavItems .hover {
  display: none;
}
#NavItems:hover .hover {
  display: inline;
}
#NavItems:hover .normal {
  display: none;
}

Which requires markup like this:

<ul id="NavItems">
  <li id="item0">
    <a href="#">
      <span class="normal">Collections</span><span class="hover">Shop Trends</span>
    </a>
  </li>
</ul>

Upvotes: 2

kinsho
kinsho

Reputation: 536

Depending on your browser compatability requirements, I'd recommend using onmouseenter instead as the trigger for your function.

DOM Events - Browser Compatability

But for one thing, you're missing an onmouseout function that can reset the class for you. Once you attach a class to an element, it has to be removed manually as well if you want it to go away depending on what the user does. So create something like a resetRollover function, like the one below, and attach an onmouseout DOM listener that fires that function:

function resetRollover(rollover) {
  var className = document.getElementById(rollover).className;

  document.getElementById(rollover).className = className.substring(0, indexOf(' rollover'));
}

Upvotes: 0

Related Questions