Question

当用户将鼠标移到它们上面时，我试图让一些元素稍微移动（它们在导航栏上形成按钮）。但是，我的代码似乎不起作用。框中的文本也应该是可点击的，但似乎也不起作用。这是代码：

#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}

.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;

/* rounded borders of 5px in firefox */
-moz-border-radius:10px;  

/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;  

/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;

/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}

.nav_tab:hover{
position: relative;
top: +5px;
}

h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}

HTML：

<div id="navbar">
<div class="nav_tab"><h2><a href="http://www.stackoverflow.com">Zues</a></h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>

我不完全确定这里发生了什么，但我认为这是某种亲子问题。

感谢。

Answer 1

该链接无法点击，因为您为.nav_tab类提供了一个负z-index值，只需将其调整为值=＆gt; 0，它会工作。

Answer 2

z-index: -1; css的.nav_tab这是你的问题，它使得容器在页面后面，所以任何鼠标事件都不起作用（悬停，指针等）删除它并准备好了：看到jsfiddle演示：

http://jsfiddle.net/QmVFR/64/

子元素在CSS中悬停/链接

2 个答案: