javascript - CSS三 Angular 形用Javascript改变显示值

Question

我有这个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 三 Angular 形具有默认值 display: none;。但是在它悬停之后，我想将它的值更改为可见。我尝试使用 document.getElementById("slideM"+n+":before").style.display="block"; 但它仍然隐藏三 Angular 形，那么如何删除那个 display : 无； 来自 CSS 和 Javascript？

谢谢

Answer 1

您不能通过 Javascript 修改伪类。您将需要通过添加/删除类来更改它。例如，通过像这样添加 CSS:

#slideM1.show:before, #slideM2.show:before, #slideM3.show:before, #slideM4.show:before, #slideM5.show:before {
   display: block;
}

和这个 Javascript

function colorM(n) {
    document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
    document.getElementById("slideM"+n+).className="show";
}

这是 fiddle 。 http://jsfiddle.net/xN6Da/1/

我建议删除 ID 并将它们替换为通用类。目前，每次添加另一个元素时。您将需要创建另一个 ID 并将其添加到 CSS。