html - 带有图像的 CSS 下拉菜单 - 防止子项消失？

Question

我基于四张图片创建了一个 CSS 下拉菜单。当我将鼠标悬停在第一个上时，其他三个出现使用 :hover on the first <li>它将其他三个的不透明度设置为 1。但是，当我向下滚动到其他三个时，我无法做到其他三个仍然存在。

Here is the live site这是 CSS 和 HTML:

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: all 0.5s;
}
li:hover + li#dropdown {
  opacity: 1;
  /* display the dropdown */
}
li#dropdown:hover li#dropdown {
  opacity: 1;
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>

Answer 1

您需要使用以下方法将悬停状态置于下拉元素上:li:hover + li#dropdown, li#dropdown:hover。

另外，这里有两个示例可以防止当鼠标悬停在下拉菜单下方时菜单显示为不需要的。

工作示例

#1 - 使用 pointer-events

最好的东西 - 过渡淡入和淡出

限制 - supported in all major browsers and IE 11 - 如果您必须支持 IE10 及以下版本，这是可能的。根据您的要求，这可能不是限制。这里有两个问题，讨论了 IE 10 及以下版本的各种替代方案 - Question One和 Question two .

ul 上的

pointer-events: none 可防止下拉菜单在不可见时激活。它在悬停时被取消 pointer-events: auto

将鼠标悬停在图像上以及悬停时显示在下方的图像

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
  pointer-events: none;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
}
li#noten {
   pointer-events: auto;
}
li:hover + li#dropdown, li#dropdown:hover {
  opacity: 1;
    pointer-events: auto;
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>

#2 在悬停时使用 translate 上下滑动下拉

限制 - 不透明度不会淡出，只会淡出

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  transform: translateY(-100%);
}
li:hover + li#dropdown, li#dropdown:hover {
  opacity: 1;
transform: translateY(0);
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>