Javascript 多个onmouseover事件

Javascript 多个onmouseover事件,javascript,html,css,Javascript,Html,Css,我有一堆翻滚,当你翻滚时,在子弹上方显示数字。我希望这些数字在mouseout上消失,但在下次onmousedown之前保持onmousedown。有没有比给每个数字一个自己的id并开关更简单的方法?我希望这有意义?!?十二, 谢谢 CSS HTML 1. 您可以使用CSS:hover和:focus-不需要JavaScript a div { display:none; } a:hover div, a:focus div { display: block; } a:foc

我有一堆翻滚,当你翻滚时,在子弹上方显示数字。我希望这些数字在mouseout上消失,但在下次onmousedown之前保持onmousedown。有没有比给每个数字一个自己的id并开关更简单的方法?我希望这有意义?!?十二,

谢谢

CSS

HTML


1.

您可以使用CSS
:hover
:focus
-不需要JavaScript

a div {
    display:none;
}

a:hover div, a:focus div {
    display: block;
}

a:focus {
    outline: none;
}
要使
:focus
选择器正常工作,还需要在每个
a
元素上设置一个
tabindex
;我建议
tabindex=“-1”
(这是一个HTML属性)。当然,您还需要将此限制为特定的
a
元素,而不是页面上的所有链接

jsFiddle:


jsFiddle基于以下问题中的代码:

是否希望先前悬停的元素的编号保持不变,直到另一个元素悬停在其上?哦,你的HTML似乎是无效的,有多个关闭的
标记,一个嵌套在
a
中的
div
,它本身在
span
中。你可以考虑将其抽象为一个通过编程方式附加它的函数。当您尝试执行此操作时,它会变得更清晰,因为您可以更抽象地使用事件对象(它应该包含对您留下的元素和您正在输入的元素的引用)。感谢您指出我的多次关闭david,一定是在我复制并粘贴它时发生的。现在修好了。我猜“a”中的“div”和“span”是不好的?我想不出别的办法了@tkone-谢谢你的回复,我会调查的,不知道从哪里开始!谢谢,调查一下,谢谢你的帮助@戴夫:我注意到你们并没有给我们提供图像元素,所以我的答案中并没有包括它们。不过,他们应该能够遵循与DIV大致相同的逻辑。太棒了,做了一件好事——比你做的还要多,一定花了好几个小时在这件事上!只需要在页面加载时让第一个项目符号“活动”#数字a:active div“不起作用-知道为什么吗?
:active
针对的是用户在点击过程中正在点击的东西(鼠标按钮仍处于按下状态)-可能不是您想要的。当页面加载时,您可以在第一个项目符号上调用
focus()
(JavaScript),但请记住,一次只能聚焦整个页面上的一件事情。如果您不能接受每当用户单击页面上的其他位置时取消选中的项目符号,那么您必须使用JavaScript方法,如下面的JSFIDLE:谢谢Brilliand,非常感谢您的帮助!
<span onmouseover="document.rollimg.src=image1.src; document.getElementById('numbers1').style.display = 'inline';">
<a class="bullet"><div id="numbers1">1</div></a></span>

<span onmouseover="document.rollimg.src=image2.src; document.getElementById('numbers2').style.display = 'inline';" 
<a class="bullet"><div id="numbers2">2</div></a></span>

<span onmouseover="document.rollimg.src=image3.src; document.getElementById('numbers3').style.display = 'inline';" 
<a class="bullet"><div id="numbers3">3</div></a></span>

<span onmouseover="document.rollimg.src=image4.src; document.getElementById('numbers4').style.display = 'inline';" 
<a class="bullet"><div id="numbers4">4</div></a></span>
a div {
    display:none;
}

a:hover div, a:focus div {
    display: block;
}

a:focus {
    outline: none;
}