2015-10-16 33 views
1

我在本网站上发现了一个符合我需求的例子,除了一件事。如果我添加悬停,左侧和右侧三角形将具有相同的颜色,而不是新的悬停颜色。任何想法当我们将鼠标悬停在矩形上时如何拥有黑色三角形?带有尖端的矩形,在悬停时改变颜色

.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>

+0

可能与http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-element/25448974#25448974。不会说重复,因为方法不同,但您可以使用该链接答案中提到的方法。对于你目前的做法,只需在'hover'上改变':after'和':before'的''border'颜色。 – Harry

回答

1

你需要作出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>