HTML，CSS懸停背景轉換

我試圖在光標懸停在其上時更改元素的背景顏色。此轉換適用於更改字體大小，但出於某種原因不適用於背景色。這是我的CSS代碼。HTML，CSS懸停背景轉換

.ul01 a,p{ 
    height: 100%; 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 16px 18px; 
    text-decoration: none; 
} 

.companyName{ 
    float: left; 
} 

.ul01 a{ 
    padding-left: 30px; 
    padding-right: 30px; 
    width: 90px; 
    float: right; 
    transition: font 1s, background-color 1s; 
} 

.ul01 a:hover{ 
    background-color: red; 
    font-size: 30px; 
}

這裏是我的HTML代碼：

<nav id="nav"> 
<ul class="ul01"> 
    <li><p class="companyName"> Company Name </p></li> 
    <li><p class="blank"></p></li> 
    <li><a href="#facebook"> Facebook </a></li> 
    <li><a href="#Twitter"> Twitter </a></li> 
</ul>

這是一個簡單的導航條。

我剛剛發現這個代碼：

li a:hover:not(.active) { 
    background-color: darkgray; 
}

我已刪除它和所有似乎運作良好，謝謝大家的提醒下一次我會謹慎看多了。

來源

2016-07-24 Jack

這似乎爲我工作。 http://jsbin.com/faxewi/edit?html,css,output – Toby

你知道爲什麼它不適合我，我可以看到字體越來越大，但背景顏色沒有改變。 – Jack

我試圖重現這一點，背景轉換工作正常與您發佈的代碼：http://plnkr.co/edit/HgdsfqgiWw09WwQT0x2B?p=preview - 你有任何其他'a'元素背景色'？ – chrki

它適用於我的鉻。爲了確保它在所有瀏覽器中都能正常工作，最好將background-color定義爲非懸停狀態，以便瀏覽器確切地知道它應該在什麼顏色的情況下進行動畫播放。

來源

2016-07-24 11:40:05

看看這個，你的li應該是display:block。

.ul01 a,p{ 
 
    height: 100%; 
 
    display: inline-block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 16px 18px; 
 
    text-decoration: none; 
 
} 
 

 
li { 
 
    display:block; 
 
} 
 

 
.ul01 a{ 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    width: 90px; 
 
    float: right; 
 
    transition: font 1s, background-color 1s; 
 
} 
 

 
.ul01 a:hover{ 
 
    background-color: red; 
 
    font-size: 30px; 
 
}

<nav id="nav"> 
 
<ul class="ul01"> 
 
    <li><p><a href="#facebook"> Facebook </a></p></li> 
 
    <li><p><a href="#Twitter"> Twitter </a></p></li> 
 
    <li><p class="companyName"> Company Name </p></li> 
 
    <li><p class="blank"></p></li> 
 
    <li><p><a href="#facebook"> Facebook </a></p></li> 
 
    <li><p><a href="#Twitter"> Twitter </a></p></li> 
 
</ul>

來源

2016-07-24 11:49:50

HTML，CSS懸停背景轉換

回答

相關問題