0

我试图弄清楚如何让背景图像具有不同图像的悬停状态并显示白色背景。

您可以在这里更详细地了解我的意思。

导航栏上的 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>
4

2 回答 2

0

用填充交换边距并重新定位背景图像

#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-27T17:09:47.533 回答
0

让你<a>占据整个宽度和高度作为一个块。

Codepen 草图：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-27T17:13:25.527 回答