懸停和填充的背景顏色

我在懸停，徽標上有背景顏色，還有填充了一些圖像。懸停和填充的背景顏色

對於背景顏色，它是在左側導航欄上看到的標識，即CAUL/CBUA。它的'懸停狀態切換到this image，懸停的背景應該填充整個塊，就像它旁邊的鏈接一樣。

對於圖像的填充，它位於相同導航欄的右側。他們是社交圖標，我確信不難看出填充應該在哪裏。

Here's the link to what I have so far. You can see the navigation bar here.

這是我的CSS：

/* Navigation bar */ 
#navi { 
height: 40px; 
background: #1e416f; 
font-size: 14px; 
color: white; 
text-transform: uppercase; 
margin: 0 0 20px 0; 
} 

#navi a:hover { 
background: white; 
color: #1e416f; 
} 

.logo { 
margin: 5px; 
padding: 0; 
float: left; 
} 

.logo a { 
float: left; 
margin: 2px 10px; 
width: 36px; 
height: 26px; 
background: url(/imgs/navi/caul_white_nav.png) left top no-repeat; 
text-indent: -9999px; 
} 

.logo a:hover { 
background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat; 
} 

#primary-nav, #tools-nav { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

#primary-nav li, #primary-nav a, 
#tools-nav li, #tools-nav a { float: left; } 

#primary-nav a, #tools-nav a { 
color: white; 
text-decoration: none; 
padding: 0 10px; 
border-right: 1px solid white; 
line-height: 40px; 
} 

#primary-nav li:first-child a, #tools-nav li:first-child a { 
border-left: 1px solid white; 
} 

#tools-nav { 
float: right; 
} 

#tools-nav .icon a { 
text-indent: -9999px; 
} 

#tools-nav .email a { 
background: url(/imgs/navi/mail.png) no-repeat; 
width: 20px; 
} 

#tools-nav .email a:hover { 
background: url(/imgs/navi-hover/hover_mail.png) no-repeat; 
width: 20px; 
} 

#tools-nav .twitter a { 
background: url(/imgs/navi/twitter.png) no-repeat; 
width: 20px; 
} 

#tools-nav .twitter a:hover { 
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat; 
width: 20px; 
} 

#tools-nav .search a { 
background: url(/imgs/navi/search.png) no-repeat; 
width: 20px; 
} 

#tools-nav .search a:hover { 
background: url(/imgs/navi-hover/hover_search.png) no-repeat; 
width: 20px; 
}

HTML：

<!-- NAVIGATION --> 
<div id="navi"> 
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1> 

<ul id="primary-nav"> 
    <li><a href="#">Directories</a></li> 
    <li><a href="#">Committees</a></li> 
    <li><a href="#">Resources</a></li> 
    <li><a href="#">About</a></li> 
</ul> 

<ul id="tools-nav"> 
    <li class="login"><a href="#">Log In</a></li> 
    <li class="email icon"><a href="#">Email</a></li> 
    <li class="twitter icon"><a href="#">Twitter</a></li> 
    <li class="search icon"><a href="#">Search</a></li> 
</ul> 
</div>

來源

2013-08-27 Michaela LeBlanc

您是否也可以包含相關的HTML？ – htxryan

@RyanHenderson添加了相關的HTML！ :) –

整個標誌位置的大小是56x30 ...所以你爲什麼不改變原始圖片的屬性？它更容易...另一種方法是將整個標識添加到div ...我沒有看到另一個解決方案 –

嘗試主動與懸停這種方法。（背景位置中心）。

#tools-nav .email a { 
     background: url("/imgs/navi/mail.png") no-repeat scroll center center transparent; 
     width: 20px; 
    }

來源

2013-08-27 17:04:11

Works！：）非常感謝。 –

你的選擇都被覆蓋做的CSS選擇範圍/訂單。更具體地覆蓋那些更一般的，在這種情況下，#navi a:hover被覆蓋，.logo a:hover使您的懸停影響不起作用。要覆蓋屬性是background其更改爲background-color: white;，你會被罰款

來源

2013-08-27 16:06:07 ars265

試試這個：

#navi.logo { 
margin: 5px; 
padding: 0; 
float: left; 
} 

#navi .logo a { 
float: left; 
margin: 2px 10px; 
width: 36px; 
height: 26px; 
background: url(/imgs/navi/caul_white_nav.png) left top no-repeat; 
text-indent: -9999px; 
} 

#navi .logo a:hover { 
background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat; 
}

來源

2013-08-27 16:08:42

可能，這將幫助別人：

.menuItem:hover

和

.menuItem :hover

是不一樣的，保重！

來源

2016-04-15 22:45:50

懸停和填充的背景顏色

回答

相關問題