私はこのhtmlを持っています
<div id="slideMenu">
<div id="slideM1" onmouseover="colorM(1)">Something 1</div>
<div id="slideM2" onmouseover="colorM(2)">Something 2</div>
<div id="slideM3" onmouseover="colorM(3)">Something 3</div>
<div id="slideM4" onmouseover="colorM(4)">Something 4</div>
<div id="slideM5" onmouseover="colorM(5)">Something 5</div>
</div>
そしてこのCSS
html, body{
font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}
#slideMenu {
float: right;
}
#slideM1:before, #slideM2:before, #slideM3:before, #slideM4:before, #slideM5:before {
content: "";
position: absolute;
top:0;
right:210px;
width: 0;
height: 0;
border-top: 32px solid transparent;
border-right: 30px solid #602F4F;
border-bottom: 32px solid transparent;
display:none;
}
#slideM1, #slideM2, #slideM3, #slideM4, #slideM5 {
background-color: silver;
height: 54px;
width: 200px;
text-align: right;
position:relative;
padding: 5px;
color: white;
margin-bottom: 2px;
}
そして最後にこのJavascript
function colorM(n) {
document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
document.getElementById("slideM"+n+":before").style.display="block";
}
ここに jsfiddle http://jsfiddle.net/xN6Da/があります。ご覧のとおり、CSS 三角形にはデフォルト値 がありますdisplay: none;
。しかし、ホバーした後、値を変更して表示したいと思います。使用しようとしましたが、まだ三角形を隠しているので、Javascript を使用して CSS からdocument.getElementById("slideM"+n+":before").style.display="block";
それを削除するにはどうすればよいですか?display: none;
ありがとうございました