您可以在红色边框外面添加(图像)标签,当光标位于标签上时仍然可以响应。
我想要实现的是标签突出,当鼠标悬停在标签上时,菜单弹出。
这是一个示例,但在红色边框上方或内部移动鼠标光标时,导航栏下方的选项卡。问题是标签也是隐藏的。
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 110px;
border: 1px solid red;
background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png");
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}

<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
</nav>
&#13;
答案 0 :(得分:0)
这应该让你朝着正确的方向前进。如果你想用CSS处理这个(没有javascript)并且让它响应特别是如果导航栏的高度发生变化,我会设置媒体查询,为你确定的每个断点指定一个固定的导航高度。使用固定高度的原因是每次都可以将菜单偏移到该精确尺寸。
我将标签图片移动到HTML中,而不是将其用作背景图片。我注意到图像周围有很多空白。我会修剪图像并删除它以使css中的定位更容易。我没有改变它,但如果你这样做,你需要稍微改变一下css以适应新的图像尺寸。我有点捏了一下它的中心,但是额外的白色空间有点破坏了居中。你真的想要左:50%,然后是图像宽度的一半的负边距,以使其居中。
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: relative;
top: -70px;
left: 0;
right: 0;
height: 70px;
border: none;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
padding: 0;
text-align:center;
}
#img-toggle {
margin: 0 auto;
padding: 0;
position:absolute;
top: -3px; /* fix this when you've trimmed your image */
left: 32%; /* fix this when you've trimmed your image */
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
height: 70px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
&#13;
<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
<img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/>
</nav>
&#13;