鼠标移到目标上/
Onmouseover/out
我有两个问题。
- 鼠标悬停功能非常快,它绝对不能正常工作。我为onmouseout状态做了一个单独的函数,但是没有用。
- 类正确地改变了,但是它保持不变,不会回到它原来的类。这取决于链接是否在所选页面上。任何帮助都将非常感谢
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 -->
使用一些简单的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>
根据浏览器兼容性要求,我建议使用onmouseenter作为函数的触发器。
DOM事件-浏览器兼容性
但是,首先,您缺少一个可以为您重置类的onmouseout函数。一旦将类附加到元素上,如果您希望它根据用户的操作而消失,也必须手动删除它。因此,创建类似resetRollover函数的东西,如下所示,并附加一个onmouseout DOM侦听器来触发该函数:
function resetRollover(rollover) {
var className = document.getElementById(rollover).className;
document.getElementById(rollover).className = className.substring(0, indexOf(' rollover'));
}
问题是您的onmouseover
处理程序在li
s上。当鼠标悬停在<li>
中的<a>
s上并"reenters"时,再次触发<li>
中的onmouseover
。
这里的例子:这是相同的代码,我增加了一些颜色。如果您只在黑色部分(<li>
)上移动鼠标,则会按预期发生翻转。但是当你将鼠标移动到绿色部分(<a>
s)。
作为一种解决方案,您可以处理<a>
s上的翻转或更改您的基本设计(参见@Thomas的答案)
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 修改鼠标事件对象的“目标”以进行事件委派
- 目标元素边缘的触摸启动会导致鼠标按下
- 获取将被鼠标悬停的目标元素
- Javascript Dispatch 鼠标事件不会传播到目标子级
- location.href将鼠标悬停在链接上时,使目标显示在状态栏中
- 射击目标:单击鼠标->保留项目符号Hole.gif
- Javascript:如何增强鼠标滚动到目标部分
- 鼠标移到目标上();不工作
- 点击鼠标移动(改变多个目标的颜色)
- 让JavaScript注意到鼠标悬停的目标发生了变化
- 如何在鼠标悬停文本中显示短url的目标页面的页面标题
- 忽略目标上的鼠标
- 鼠标移到目标上,onmouseout不能在IE中工作
- 具有Javascript功能的Href不显示“;将目标另存为“;单击鼠标右键
- 如何使鼠标事件将 TR 元素注册为目标
- 鼠标退出将关闭触发器,而不是目标
- 将鼠标悬停扩展到另一个目标元素
- 如何在鼠标悬停时显示中间重定向链接的真实目标
- 鼠标移到目标上/