Question

嘿，我创建了一个导航栏，并在其下添加了一个虚幻的标记效果。

基本上我想要它做的是当我将鼠标悬停在图像上以便在其下显示箭头时。

不幸的是，我无法让它发挥作用。

在下图中，我想展示。这就是箭头的放置方式。基本上，我已经在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>

Answer 1

抓住扳手*，刺痛的声音* 背景音乐与低音量摇滚{ace of acedes};

尝试使用以下设置导航栏：

groupingBy

使用以下项设置箭头：

z-index:2;
position: relative;

通过设置更高的Z-index:1; position: relative;值来创建图层类型逻辑：值越高，图层的上限就越高; 受z-index影响的所有对象必须具有position属性;

Answer 2

总结一下，我意识到，如果我将可见性设置为M，则不能将鼠标悬停在元素上，因为它对您隐藏。

最简单的解决方案，而不是使用hidden;属性，使用visibility:属性很好，并在0和1之间切换（悬停）。

重叠元素和可见性的问题

2 个答案: