Javascript 结束/结束
我有两个问题Javascript 结束/结束,javascript,onmouseout,Javascript,Onmouseout,我有两个问题 鼠标悬停功能非常快,而且肯定不能正常工作。我为onmouseout状态创建了一个单独的函数,但它没有帮助 类会正确地更改,但是它会保持更改,不会返回到原始类。这取决于链接是否位于所选页面上。任何帮助都将不胜感激 JAVASCRIPT: function changeRollover(rollover) { var rollItems = document.getElementById(rollover); var rollLinks = rollItems.getE
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";
}
}
功能更改滚动(滚动){
var rollItems=document.getElementById(滚动);
var rollLinks=rollItems.getElementsByTagName('a');
var noOfLinks=rollLinks.length;
for(var r=0;r
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 -->
根据您的浏览器兼容性要求,我建议改用onmouseenter作为您功能的触发器
但首先,您缺少一个onmouseout函数,该函数可以为您重置类。一旦您将一个类附加到一个元素上,如果您希望根据用户的操作将其删除,那么也必须手动删除该类。因此,创建一个resetRollover函数,如下所示,并附加一个启动该函数的onmouseout DOM侦听器:
function resetRollover(rollover) {
var className = document.getElementById(rollover).className;
document.getElementById(rollover).className = className.substring(0, indexOf(' rollover'));
}
您想要的效果(从可用性的角度来看是可疑的,但除此之外)最好使用一些简单的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>
问题在于您的onmouseover
处理程序位于li
s上。当鼠标悬停在上时:这与您的代码相同,我添加了一些颜色。如果仅在黑色部分(即
)上移动鼠标,则会根据需要进行翻转。但当您将鼠标移动到绿色部分时(即
s)
作为一种解决方案,您可以处理
上的滚动,也可以更改您的基本设计(请参见@Thomas的答案)