javascript - 多个 onmouseover 事件

Question

我有一堆滚动条，当你滚动它们时，它们会在元素符号上方显示数字。我希望数字在 mouseout 上消失，但在下一次 onmousedown 之前保持在 onmousedown 上。有没有比给每个数字自己的 id 并打开和关闭它更简单的方法呢？我希望这是有道理的？!？12

谢谢!

CSS

#numbers1, #numbers2, #numbers3, #numbers4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #6e6965;
margin: -10px 0 0 2px;
position: absolute;
display:none;
}

HTML

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

Answer 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:http://jsfiddle.net/c4yq5/

jsFiddle 基于问题的代码:http://jsfiddle.net/FpSgW/1/