CSS讓一個特定的圖像出現在特定的導航欄上hover

Question

我需要這樣做，如果我有一個導航欄與家庭，石油，煤炭和天然氣，當我懸停在油，它會使背景圖像那個盒子裏有一個油滴或什麼東西，如果我把它懸停在煤上，它會在那個特定的盒子裏有煤的背景圖像。

這是到目前爲止我的代碼，但它目前呈現相同的圖像（油）不管是什麼我將鼠標懸停在：

#NavBar ul { 
 
    border-top-left-radius: 6px; 
 
    border-bottom-left-radius: 6px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
#NavBar li { 
 
    width: 100px; 
 
    float: left; 
 
} 
 
#NavBar li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 
#NavBar a:hover { 
 
    background-color: #111; 
 
    background-image: url("billeder/olie_navbar.png"); 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div id="NavBar"> 
 
    <ul> 
 
    <li><a href="index.html">Hjem</a> 
 
    </li> 
 
    <li><a href="olie.html">Olie</a> 
 
    </li> 
 
    <li><a href="kul.html">Kul</a> 
 
    </li> 
 
    <li><a href="naturgas.html">Naturgas</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

你需要創建一個ID或一類在您的導航每個項目，像這樣：

<div id="NavBar"> 
    <ul> 
    <li><a href="index.html">Hjem</a> 
    </li> 
    <li><a class="olie" href="olie.html">Olie</a> 
    </li> 
    <li><a class="kul" href="kul.html">Kul</a> 
    </li> 
    <li><a class="naturgas" href="naturgas.html">Naturgas</a> 
    </li> 
    </ul> 
</div> 

然後分配background-image相應：

#NavBar olie:hover { 
    background-color: #111; 
    background-image: url("billeder/olie_navbar.png"); 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center; 
} 


#NavBar kul:hover { 
    background-color: #111; 
    background-image: url("billeder/kul_navbar.png"); 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center; 
} 


#NavBar naturgas:hover { 
    background-color: #111; 
    background-image: url("billeder/naturgas_navbar.png"); 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

這樣每個a標籤可以有不同的懸停狀態

Answer 2

每個你應該給一個元素自身的ID。然後根據ID爲每個ID分配背景圖像。

#Hjem:hover{ 
 
    background-image: url("Hjem.png"); 
 
} 
 

 
#Olie:hover{ 
 
    background-image: url("Olie.png"); 
 
} 
 

 
#Kul:hover{ 
 
    background-image: url("Kul.png"); 
 
} 
 

 
#Naturgas:hover{ 
 
    background-image: url("Naturgas.png"); 
 
} 
 

 
#NavBar ul { 
 
    border-top-left-radius: 6px; 
 
    border-bottom-left-radius: 6px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
#NavBar li { 
 
    width: 100px; 
 
    float: left; 
 
} 
 
#NavBar li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
#NavBar a:hover { 
 
    background-color: #111; 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div id="NavBar"> 
 
    <ul> 
 
    <li><a id="Hjem" href="index.html">Hjem</a> 
 
    </li> 
 
    <li><a id="Olie" href="olie.html">Olie</a> 
 
    </li> 
 
    <li><a id="Kul" href="kul.html">Kul</a> 
 
    </li> 
 
    <li><a id="Naturgas" href="naturgas.html">Naturgas</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

所以您的標記並沒有真正允許單個標籤的任何特定目標， - 基本上你的CSS的目標每一個列表項，而不是一個具體的列表項。

我做了一些修改你的代碼， - 增加了一個類每個李標籤 的 - 增加了一個CSS選擇器爲每個類

的希望你能看到把它從這裏。

li.hjem a:hover { 
 
    background-image: url("billeder/hjem_navbar.png"); 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
li.olie a:hover { 
 
    background-image: url("billeder/olie_navbar.png"); 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
li.kul a:hover { 
 
    background-image: url("billeder/kul_navbar.png"); 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
li.Naturgas a:hover { 
 
    background-image: url("billeder/Naturgas_navbar.png"); 
 
    background-size: 30px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div id="NavBar"> 
 
    <ul> 
 
    <li class="hjem"><a href="index.html">Hjem</a> 
 
    </li> 
 
    <li class="olie"><a href="olie.html">Olie</a> 
 
    </li> 
 
    <li class="kul"><a href="kul.html">Kul</a> 
 
    </li> 
 
    <li class="naturgas"><a href="naturgas.html">Naturgas</a> 
 
    </li> 
 
    </ul> 
 
</div>