0

我有两个问题。

  1. 鼠标悬停功能非常快，而且肯定不能正常工作。我为 onmouseout 状态创建了一个单独的函数，但它没有帮助。
  2. 类正确更改，但它保持更改并且不会回到原来的类。这取决于链接是否在所选页面上。任何帮助将不胜感激

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 -->
4

3 回答 3

2

使用一些简单的 CSS 可以更好地实现您想要的效果（从可用性的角度来看是可疑的，但除此之外）：

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

这需要这样的标记：

<ul id="NavItems">
  <li id="item0">
    <a href="#">
      <span class="normal">Collections</span><span class="hover">Shop Trends</span>
    </a>
  </li>
</ul>
于 2013-01-15T21:40:05.137 回答
0

根据您的浏览器兼容性要求，我建议您使用 onmouseenter 作为函数的触发器。

DOM 事件 - 浏览器兼容性

但一方面，您缺少一个可以为您重置课程的 onmouseout 功能。将类附加到元素后，如果您希望它消失，也必须手动将其删除，具体取决于用户的操作。因此，创建一个类似于 resetRollover 函数的东西，如下所示，并附加一个触发该函数的 onmouseout DOM 侦听器：

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

  document.getElementById(rollover).className = className.substring(0, indexOf(' rollover'));
}
于 2013-01-15T21:35:04.050 回答
0

问题是您的onmouseover处理程序在lis. 当鼠标悬停在<a>s 中的 s 上时，再次触发s 的<li>“重新进入” 。onmouseover<li>

此处的示例：这与您的代码相同，我添加了一些颜色。如果您仅在黑色部分 (the <li>) 上移动鼠标，则会根据需要进行翻转。但是当你在绿色部分（<a>s）上移动鼠标时。

作为一种解决方案，您可以处理<a>s 上的翻转或更改您的基本设计（请参阅@Thomas 的回答）

于 2013-01-15T21:43:05.670 回答