0

ロールオーバーすると、箇条書きの上に数字が表示されるロールオーバーがたくさんあります。onmouseout で数字を消したいのですが、次の 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>
4

1 に答える 1

0

これは CSS で行うことができ、JavaScript は必要ありません:hover。:focus

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/

于 2012-07-02T22:25:46.127 に答える