嘿，我创建了一个导航栏，我在它下面添加了一个幻觉标记效果。
基本上我想要它做的是当我将鼠标悬停在图像上时，箭头会显示在图像下方。
不幸的是，我无法让它正常工作。
在下面的插图中，我想展示。这就是箭头的放置方式。基本上，我将第二个设置为 visibility: hidden;，为了便于说明，将其余部分设置为可见。
黑色背景显示我将光标悬停在上面的那个(展示选择作品，我的 css 实现一定有问题)。我将背景设置为#000(黑色)只是为了说明悬停的目的。至于实际代码，我只希望图像可见。
所以再一次，我想要的是让箭头保持隐藏状态，除非您将鼠标悬停在它们上面。我的代码看起来像这样
<div class = "arrows">
<img src="" class="1" alt =""><img src="" class="2" alt =""
<img..et cetera>
</div>
至于实际的 CSS，我设置了一些并不重要的边距和填充。
基本上重要的部分是:
.arrows img {
position: relative;
bottom: 20px;
}
现在是特定的箭头
img.1 {
visiblity:hidden;
margin, padding and few other properties
}
img.1:hover {
visibility: visible;
}
但是，当我将鼠标悬停在图像上时，它仍然不可见。有什么解决办法吗？
编辑:添加代码片段/jsfiddle
* {
box-sizing: border-box;
/* Opera/IE 8+ */
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: Arial;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
/*
====================================================
NAVIGACNY PANEL
====================================================
*/
.navbar {
background-color: #3c1f0a;
width: 100%;
height: 40px;
}
.navbar ul {
z-index: -1;
text-align: center;
display: inline-block;
list-style: none;
margin-left: 175px;
padding: 0px;
}
.navbar li {
width: 80px;
display: inline-block;
font-family: Helvetica;
font-size: 13px;
padding: 0 5px;
}
.navbar a {
text-decoration: none;
color: #FFF;
}
.navbar li:hover {
background-color: #602401;
}
/*
=============================================================
KRATKY POPIS - Index
=============================================================
*/
.ITW {
width: 100%;
height: auto;
padding-bottom: 20px;
background: rgb(252, 255, 251);
background: linear-gradient(to bottom, rgba(252, 255, 251, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 250, 1) 1%, rgba(255, 253, 255, 1) 1%, rgba(252, 252, 252, 1) 20%, rgba(250, 250, 250, 1) 21%, rgba(248, 248, 248, 1) 31%, rgba(246, 246, 246, 1) 32%, rgba(247, 247, 247, 1) 35%, rgba(233, 233, 233, 1) 73%, rgba(234, 234, 234, 1) 75%, rgba(232, 232, 232, 1) 76%, rgba(227, 227, 227, 1) 100%);
}
.ITW img {
visibility: hidden;
position: relative;
padding: 30px 15px 10px 17px;
bottom: 20px;
}
.ITW img:hover {
position: relative;
visibility: visible;
}
img.move-image {
margin-left: 190px;
}
img.ma {
padding-left: 30px;
margin-left: 30px;
}
img .ma:hover {
visibility: visible;
}
img.mb {
padding-left: 20px;
padding-right: 30px;
margin-left: 20px;
}
img.mc {
padding-right: 30px;
margin-left: 15px;
}
img.md {
padding-right: 20px;
margin-left: 25px;
}
img.me {
margin-left: 30px;
}
img.mf {
margin-left: 30px;
padding-right: 15px;
}
.ITW h2 {
font-family: Helvetica;
font-size: 19px;
padding: 10px 0px 15px 0px;
color: #b15e23;
margin-left: 200px;
}
.ITW p {
font-family: Helvetica;
font-size: 12px;
color: #656565;
margin-left: 200px;
}<body>
<div class="navbar">
<ul>
<li><a href="#ITW">Index</a>
</li>
<li><a href="#ITW">O predmete</a>
</li>
<li><a href="#Lectures">Prednášky</a>
</li>
<li><a href="#Results">Výsledky</a>
</li>
<li><a href="#Exercises">Cvičenia</a>
</li>
<li><a href="#Contact">Kontakt</a>
</li>
<li><a href="#Related">Related</a>
</li>
</ul>
</div>
<div class="ITW">
<img src="icons/menu_bullet.gif" class="move-image" alt="moved-bullet">
<img src="icons/menu_bullet.gif" class="ma" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mb" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mc" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="md" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="me" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mf" alt="index-bullet">
</div>最佳答案
捕获 Spanner *，刺痛的声音* 低音量摇滚背景音乐{黑桃王牌}；
尝试设置导航栏:
z-index:2;
position: relative;
设置箭头:
Z-index:1;
position: relative;
通过设置更高的 Z-index 值来创建图层类型逻辑:该值越高，上层将被设置；
所有受 z-index 影响的对象都必须有 position 属性；
关于html - 重叠元素和可见性的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35720327/