1

我无法在悬停时使用背景颜色，在徽标上以及在某些图像周围进行填充。

对于背景颜色，它是您在左侧导航栏上看到的 CAUL/CBUA 徽标。它的悬停状态切换到此图像，悬停时的背景应该像旁边的链接一样填充整个块。

对于图像的填充，它位于右侧的同一导航栏上。他们是社交图标，我相信不难看出填充应该在哪里。

这是我到目前为止所拥有的链接。你可以在这里看到导航栏。

这是我的 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>
4

4 回答 4

6

可能这会帮助某人：

.menuItem:hover

和

.menuItem :hover

不一样，保重！

于 2016-04-15T22:45:50.230 回答
1

尝试这个：

#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-27T16:08:42.280 回答
1

在活动和悬停时尝试此方法。（背景位置中心中心）。

#tools-nav .email a {
        background: url("/imgs/navi/mail.png") no-repeat scroll center center transparent;
        width: 20px;
    }
于 2013-08-27T17:04:11.990 回答
0

您的选择器被覆盖做 CSS 选择器范围/顺序。更具体的覆盖那些更一般的覆盖，在这种情况下，#navi a:hover是覆盖，.logo a:hover使你的悬停效果不起作用。您要覆盖的属性将其background更改为background-color: white;，您会没事的

于 2013-08-27T16:06:07.337 回答