與懸停的背景顏色的背景圖像

我想弄清楚如何有一個不同的圖像懸停狀態的背景圖像和顯示白色背景。與懸停的背景顏色的背景圖像

您可以更詳細地明白我的意思here.

CAUL/CBUA的導航欄上的標誌是什麼，我試圖修復。你可以看到，當你懸停時，它確實切換到圖像，並且還有一個白色背景但是白色的背景沒有延伸到它的全部塊。要查看我的意思的完整塊，請將鼠標懸停在徽標旁邊的鏈接上，並注意它佔用了整個區塊。

編輯：這裏是我的編輯CSS（只是改變了部分）

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

#navi .logo a { 
float: left; 
width: 56px; 
height: 40px; 
background: url(/imgs/navi/caul_white_nav.png) center no-repeat; 
text-indent: -9999px; 
} 

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

這是我原來的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; 
} 

#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; 
background-color: white; 
} 

#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; 
} 

#tools-nav a:hover { 
color: #1e416f; 
} 

#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

讓你<a>佔據整個寬度和高度爲一個塊。

Codepen skech：http://cdpn.io/FjJsu

CSS

#navi .logo a { 
    float: left; 
    width: 56px; 
    height: 40px; 
    background: url(/imgs/navi/caul_white_nav.png) center no-repeat; /*Center your background*/ 
    text-indent: -9999px; 
} 

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

來源

2013-08-27 17:13:25 kunalbhat

帶填充的交換邊距並重新定位背景圖像

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

編輯：只要確保有相同的背景定位於:hover以及

來源

2013-08-27 17:09:47

與懸停的背景顏色的背景圖像

回答

相關問題