CSS - 管理欄：懸停

我試圖在管理欄上設置一個按鈕的樣式。它工作得很好，但它有一些缺陷。CSS - 管理欄：懸停

此按鈕位於管理欄上並具有文本「維護」。點擊按鈕後，jQuery會將類.flicker添加到它。

我想要的按鈕做的這是什麼;一旦應用.flicker，應該沒有懸停效果。但是，如果.flicker類未應用，則懸停效果應爲默認值（藍色文本和淺灰色背景）。

這是HTML：使用以下WordPress默認CSS

<ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> 
     <li id="wp-admin-bar-wpmaintenance" class="wpmaintenance-icon"><a class="ab-item" href="#"><span class="ab-icon"></span><span class="ab-label">Maintenance</span></a></li> 
</ul>

：

#wpadminbar .ab-top-menu>li.hover>.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus { 
    background: #32373c; 
    color: #00b9eb; 
}

用我自己的CSS：

.flicker, .flicker:hover { 
    -webkit-animation: flickerAnimation 2s infinite; 
    -moz-animation: flickerAnimation 2s infinite; 
    -o-animation: flickerAnimation 2s infinite; 
    animation: flickerAnimation 2s infinite; 
}

有沒有辦法做到這一點？我希望有人能幫助我。

來源

2017-02-20 Mitch

嘗試添加了'！important'標籤在你的CSS文件。 – Jer

@ C0dekid對不起，問題有點混亂，我已經更新了。 – Mitch

你可以嘗試懸停事件設置爲.flickler類樣式，並將其設置爲默認樣式，使用！重要將覆蓋其它懸停聲明

.flicker:hover{ 
    background: #32373c !important; 
    color: #00b9eb !important; 
}

來源

2017-02-20 11:17:50

對不起，沒有工作 – Mitch

你能否創建一段代碼以便讓我們更好地理解？ –

是不是你在找什麼？

.link:hover { 
 
    color: blue; 
 
} 
 

 
.link.flicker { 
 
    background: red; 
 
    color: white; 
 
} 
 

 
.flicker:hover { 
 
    background: red; 
 
}

<a href="#" class="link">Maitnenance</a> 
 
<a href="#" class="link flicker">Maitnenance</a>

來源

2017-02-20 11:19:10

我認爲問題是，雖然要添加CSS到.flicker：懸停狀態，你只添加的風格，你是不是刪除/覆蓋現有的。

.flicker, .flicker:hover { 
    background: white; #what color you want 
    color: black; #what color you want 
    -webkit-animation: flickerAnimation 2s infinite; 
    -moz-animation: flickerAnimation 2s infinite; 
    -o-animation: flickerAnimation 2s infinite; 
    animation: flickerAnimation 2s infinite; 
}

這意味着，在添加閃爍類將覆蓋由WordPress默認的CSS添加懸停狀態變化（只要你的CSS來後）。

如果你擔心你的css沒有被應用在默認樣式之後，你總是可以添加！重要的是給它更多的特殊性。

e.g: background: white!important;

希望它可以幫助

來源

2017-02-20 13:37:06 Brad

CSS - 管理欄：懸停

回答

相關問題