Question

我有一堆翻转，当你翻过它们时会在子弹上方显示数字。我希望数字在onmouseout上消失，但仍然保持在mousedown直到下一个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选择器正常工作，您还需要在每个tabindex元素上使用a;我建议tabindex="-1"（这是一个HTML属性）。当然，您还需要将此限制为特定的a元素，而不是页面上的所有链接。

jsFiddle：http://jsfiddle.net/c4yq5/

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

多个onmouseover事件

1 个答案: