避免應用風格：當使用後：懸停

我使用：後讓自己的半徑和梯度的邊界，如：避免應用風格：當使用後：懸停

#main .element { 
     border-radius: 10px; 
     background: #FFF; 
    } 

#main .element:after { 
     border-radius: 10px; 
     background: linear-gradient(red, blue); 
     top: -7px; 
     bottom: -7px; 
     left: -7px; 
     right: -7px; 
     z-index:-1; 
    }

我希望有問題的元素來改變它的背景顏色當正在盤旋過來，如：

#main .element:hover { 
    background: #F00; 
}

的問題是：after僞元素被選中過了，其背景也發生了變化 - 我不想：後懸停在何時來實現風格元素 - 我想讓邊框保持其背景色。關於如何做到這一點的任何建議？我寧願使用CSS，但如果需要的話，我不反對使用jQuery。謝謝

來源

2015-12-02 William Paul

你確定你已經發布的CSS是造成問題的原因？在這裏看起來很好：http://jsfiddle.net/RoryMcCrossan/gb8362x6/ –

無法複製 - http://jsfiddle.net/Paulie_D/xydj02rc/ –

尋求代碼幫助的問題必須包含重現它所需的最短代碼**這個問題本身**。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

問題不是:after是從父母繼承樣式，爲this jsfiddle shows。
你的問題是，:after的CSS缺少幾個關鍵特性：

#main .element:after { 
    /* :before and :after elements *must* have `content` set, even if it is empty*/ 
    content: ""; 
    border-radius: 10px; 
    background: linear-gradient(red, blue); 
    /* :after also doesn't have any size, since you never position it. Without a non-static position, top, bottom, etc. are ignored*/ 
    position:absolute; 
    top: -7px; 
    bottom: -7px; 
    left: -7px; 
    right: -7px; 
    z-index: -1; 
}

來源

2015-12-02 16:38:59

避免應用風格：當使用後：懸停

回答

相關問題