如何處理重疊的非方形DIV懸停問題？

Question

我想創建自定義按鈕。
但是，由於重疊的僞元素，懸停函數無法正常工作。
我該如何解決它？謝謝。

核心的CSS如下所示：

#left-btn{ 
    background: #007bff; 
    } 

    #left-btn::after{ 
    content: ""; 
    margin-left: 8vw; 
    display: block; 
    border-style: solid; 
    border-width: 30px 0 0 45px; 
    border-color: transparent transparent transparent #007bff;   
    } 

    #right-btn{ 
    background: #BF2C36; 
    margin-left: 45px; 
    } 
    #right-btn::before{ 
    content: ""; 
    display: block; 
    margin-left: -45px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 45px 30px 0; 
    border-color: transparent #BF2C36 transparent transparent; 
    } 

    #right-btn:hover{ 
    cursor: pointer; 
    background: #710305; 
    } 
    #right-btn:hover::before { 
    border-right-color: #710305; 
    cursor: pointer; 
    } 

    #left-btn:hover{ 
    cursor: pointer; 
    background: #0062CC; 
    }  
    #left-btn:hover::after { 
    border-right-color: #0062CC; 
    cursor: pointer; 
    } 

或jsfiddle

Answer 1

你可以不喜歡它this

CSS

#left-btn::after{  
    right: -23px; 
    background: #007bff; 
    } 
    #right-btn::before{ 
    left: -23px; 
    background: #bf2c36; 

    } 
#left-btn::after, 
#right-btn::before { 
    -moz-transform: skew(56deg, 0deg);  
    -webkit-transform: skew(56deg, 0deg);  
    transform: skew(56deg, 0deg); 
    position: absolute; 
    top:0; 
    width: 50px; 
    height: 30px; 
    content: ""; 
    display: block; 
} 

Answer 2

試試這個CODEPEN DEMO HTML

<div class="btn-set"> 
    <div id="left-btn"></div> 
    <div id="right-btn"></div> 
</div> 

CSS

.btn-set{ 
    display:inline-block; 
    } 
    #left-btn,#right-btn{ 
    height:30px; 
    width:8vw; 
    display: inline-block; 
    } 

    #left-btn{ 
    background: #007bff; 
border-width: 30px 0 0 45px; 
    } 

    #left-btn::after{ 
    content: ""; 
    margin-left: 8vw; 
    display: block; 
    border-style: solid; 
    border-width: 30px 0 0 45px; 
    border-color: transparent transparent transparent #007bff;   
    } 

    #right-btn{ 
    background: #BF2C36; 
    margin-left: 45px; 
    } 
    #right-btn::before{ 
    content: ""; 
    display: inline-block; 
    margin-left: -45px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 45px 30px 0; 
    border-color: transparent #BF2C36 transparent transparent; 
    } 

    #right-btn:hover{ 
    cursor: pointer; 
    background: #710305; 

    } 
    #right-btn:hover::before { 
    border-right-color: #710305; 
    cursor: pointer; 
    } 

    #left-btn:hover{ 
    cursor: pointer; 
    background: #0062CC; 
    }  
    #left-btn:hover::after { 
    border-left-color: #0062CC; 
    cursor: pointer; 
    }