我根据四张图片创建了一个CSS下拉菜单。当我将鼠标悬停在第一个上时，其他三个显示使用：将鼠标悬停在第一个<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>
答案 0 :(得分：2)
您需要使用以下内容将悬停状态放置在下拉列表元素上：li:hover + li#dropdown, li#dropdown:hover。
此外，以下两个示例可防止在您的下拉列表中悬停鼠标时显示不需要的菜单。
pointer-events 最好的事情 - 过渡淡入和淡出
限制 - supported in all major browsers and IE 11 - 如果您必须拥有IE10及以下支持，则可以。根据您的要求，这可能不是限制。以下是两个问题，讨论IE 10及以下版本的各种备选方案 - Question One和Question two。
pointer-events: none上的 ul会阻止下拉列表在不可见时激活。它会在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>
限制 - 不透明度不会淡出，仅在
中
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>
答案 1 :(得分：0)
大致如此：
<div class="menu_img_container">
<img src="pic.jpg">
<ul>
<li><a href="#1">Item 1</a></li>
<li><a href="#1">Item 2</a></li>
<li><a href="#1">Item 3</a></li>
</ul>
</div>
<style>
.menu_img_container
{
display: inline;
position: relative;
}
.menu_img_container ul
{
display: none;
position: absolute;
top: 50px;
left: 0;
}
.menu_img_container:hover ul
{
display: block;
}
</style>
答案 2 :(得分：0)
您可以使用转场http://jsfiddle.net/zn6j5xvv/
延长悬停效果HTML
<div id="a">a
<div id="b">
<img src="http://placekitten.com/300/301"/>
</div>
CSS
#a{
width:50px;
height:50px;
background-color:green;
transition:0s 100s;
}
#b{
width:200px;
height:200px;
opacity:0;
transition:0s 100s;
}
#a:hover #b{
opacity:1;
transition:0s;
}
答案 3 :(得分：0)
这应该可以解决问题，只需更新css的这三部分
li#dropdown {
height: 510px;
padding: 0px;
margin:0px;
display:none;
transition: all 0.5s;
}
li:hover + li#dropdown {
display: block; /* display the dropdown */
}
li#dropdown:hover{
display:block;
}
答案 4 :(得分：0)
这有点棘手，因为你希望有一个很好的不透明度过渡。仅display: none就会简单得多。但是，如果您使用position: absolute组合隐藏项目和不透明度进行过渡，我们仍然可以使其适用于过渡。
将:hover选择器从li移至整个ul
ul:hover > li#dropdown {
opacity: 1;
top: auto;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: all 0.5s;
position: absolute; /* move items far off the screen */
top: -1000px;
}
它应该有效。所以我的想法是#dropdown菜单移动到屏幕外的绝对位置，这使得无法将鼠标悬停在＆＃34;隐形＆＃34;物品，所以他们不会出现在白色区域悬停。但是，在第一个项目悬停时，您会使用top: auto返回下拉列表，以便再次将其悬停。过渡也会奏效。