帶有尖端的矩形，在懸停時改變顏色

我在本網站上發現了一個符合我需求的例子，除了一件事。如果我添加懸停，左側和右側三角形將具有相同的顏色，而不是新的懸停顏色。任何想法當我們將鼠標懸停在矩形上時如何擁有黑色三角形？帶有尖端的矩形，在懸停時改變顏色

.yourButton { 
 
    position: relative; 
 
    width:200px; 
 
    height:40px; 
 
    margin-left:40px; 
 
    color:#FFFFFF; 
 
    background-color:blue; 
 
    text-align:center; 
 
    line-height:40px; 
 
} 
 
.yourButton:hover {background-color:black} 
 
.yourButton:before { 
 
    content:""; 
 
    position: absolute; 
 
    right: 100%; 
 
    top:0px; 
 
    width:0px; 
 
    height:0px; 
 
    border-top:20px solid transparent; 
 
    border-right:40px solid blue; 
 
    border-bottom:20px solid transparent; 
 
} 
 

 
.yourButton:after { 
 
    content:""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top:0px; 
 
    width:0px; 
 
    height:0px; 
 
    border-top:20px solid transparent; 
 
    border-left:40px solid blue; 
 
    border-bottom:20px solid transparent; 
 
}

<div class="yourButton">You wanted this?</div>

來源

2015-10-16 Adyyda

可能與http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-element/25448974#25448974。不會說重複，因爲方法不同，但您可以使用該鏈接答案中提到的方法。對於你目前的做法，只需在'hover'上改變'：after'和'：before'的''border'顏色。 – Harry

你需要作出2個不同的懸停類:after和:before，並更改邊框顏色。

.yourButton { 
 
    position: relative; 
 
    width:200px; 
 
    height:40px; 
 
    margin-left:40px; 
 
    color:#FFFFFF; 
 
    background-color:blue; 
 
    text-align:center; 
 
    line-height:40px; 
 
} 
 
.yourButton:hover {background-color:black} 
 
.yourButton:before { 
 
    content:""; 
 
    position: absolute; 
 
    right: 100%; 
 
    top:0px; 
 
    width:0px; 
 
    height:0px; 
 
    border-top:20px solid transparent; 
 
    border-right:40px solid blue; 
 
    border-bottom:20px solid transparent; 
 
} 
 

 
.yourButton:after { 
 
    content:""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top:0px; 
 
    width:0px; 
 
    height:0px; 
 
    border-top:20px solid transparent; 
 
    border-left:40px solid blue; 
 
    border-bottom:20px solid transparent; 
 
} 
 

 

 
.yourButton:hover:after{ 
 
    border-left:40px solid #000; 
 
} 
 
.yourButton:hover:before{ 
 
    border-right:40px solid #000; 
 
}

<div class="yourButton">You wanted this?</div>

來源

2015-10-16 07:01:16

帶有尖端的矩形，在懸停時改變顏色

回答

相關問題