悬停延迟/悬停效果在光标离开效果区域后保持真实答案

【问题标题】：Hover delay / Hover effect staying true after cursor leaving area of effect悬停延迟/悬停效果在光标离开效果区域后保持真实
【发布时间】：2015-08-21 23:20:38
【问题描述】：

我已经开始制作这个网页，其中包含用于更改网页语言的标志悬停菜单。

显示了三个标志。这是一个悬停，只有当我将鼠标悬停在英国国旗上时，丹麦和德国国旗才会出现。

然而，这会产生一个问题，因为在 10 个像素的标志之间存在间隙。一旦光标离开英国国旗，悬停菜单就会消失。我需要某种延迟，使悬停效果在光标离开效果区域后保持 1-2 秒。这样我就可以到达丹麦和德国国旗。

我的 HTML 代码：

<div id="nav"> 
<ul style="list-style:none;">
<li><img id="England" src="England.png">
<ul style="list-style:none;">   
<li><img id="Denmark" src="Denmark.png"></li>
<li><img id="Germany" src="Germany.png"></li>
</ul>
</li>
</ul>
</div>

我的 CSS 代码：

#nav ul li:hover ul{
display: block;

}

#nav ul ul{
display: none;

}

#England{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:10px;
left:524px;
}

#Denmark{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:80px;
left:524px;
}

#Germany{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:150px;
left:524px;
}

我尝试过使用 transition-delay:1s;但没有运气。有没有聪明的头脑可以帮助我？

【问题讨论】：

那是完全无关紧要的东西，我现在已经从我的代码中删除了，因为你现在让我意识到了这一点。然而，他们在下面的教程中做到了这一点，这就是我这样做的原因！再也不会了。

标签： html css hover

【解决方案1】：

我对此进行了测试，它对我有用:)

JS 小提琴：http://jsfiddle.net/ogwdgwew/

我所做的是将所有元素放在一个 ul 中，但在丹麦和德国国旗上添加了伪 ::before 元素，以便它们弥合之前的空白。

HTML：

<div id="nav"> 
<ul id="flags">
    <li><img id="England" src="England.png"/></li>
    <li><img id="Denmark" src="Denmark.png"/></li>
    <li><img id="Germany" src="Germany.png"/></li>
</ul>
</div>

CSS：

#England{
height:60px;
width:86px;
position: absolute;
top:10px;
left:524px;
}

#Denmark::before,
#Germany::before{
position: absolute;
width: 86px;
height: 10px;
content: "";
top: -10px;
}

#Denmark{
height:60px;
width:86px;
position: absolute;
top:80px;
left:524px;
display: none;
}

#Germany{
height:60px;
width:86px;
position: absolute;
top:150px;
left:524px;
display: none;
}
#flags{
list-style: none;
}

#flags:hover *{
display: block;
}

【讨论】：

很抱歉，我现在已经尝试过了，但它对我不起作用：/ 我有确切的结果作为我自己的代码。当我悬停时，旗帜会向前盘旋，当我进入旗帜之间的间隙时消失。
@user3677855 - 你是否删除了你写的所有代码并用我写的替换它？
好吧，这真的很奇怪。你的小提琴有效，但是当我将你的代码粘贴到 eclipse 中并在 chrome 中运行它时，它不会......你试过在 chrome 中运行你的吗？
@user3677855 - 我将 chrome 作为我的主要浏览器并对其进行了测试，它确实有效！...这真的很令人困惑

【解决方案2】：

答案不是单独定位所有列表项，而是将它们分组在父ul中。

通过应用position:absolute 和top:100%，子菜单将始终位于父级li 下方没有任何差距 无论父级li 有多高是。

* { /* quick reset */
    margin: 0;
    padding: 0;
}

#nav{ /* just for spacing in demo */
    padding: 25px;
}
#nav > ul > li {
    position: relative; /* positioning context */
    background: lightgreen;
    display: inline-block;
}
#nav ul ul {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    background: orange;
}
#nav ul li:hover ul {
    display: block;
}

<div id="nav">
    <ul style="list-style:none;">
        <li>Flags
            <ul style="list-style:none;">
                <li>England</li>
                <li>Denmark</li>
                <li>Germany</li>
            </ul>
        </li>
    </ul>
</div>

绝对定位是一种很差的布局方式，应该只用于特定的效果。它有它的位置，但是将每个元素轻推到正确的位置不是吗。这可能会帮助LearnLayout.com

【讨论】：

好吧，您实际上想出了解决方案，尽管我必须对您的代码进行一些更改才能使其执行我想要执行的操作。那就是我删除了您的填充：25px；并将其替换为预期位置。然后我将背景颜色更改为透明。最后 ii 将 html 更改为：
所以这并不完全是你所做的，但绝对是受到你的启发。所以猜你有幸找到解决方案

【解决方案3】：

好的，谢谢大家帮助我。毫无疑问，是你们启发了我想出一个解决方案，这对我来说是一个很好的学习课程。

我想出了这个解决方案来解决我的问题：

HTML：

<div id="nav">
<ul style="list-style:none;">
<li><img id="England" src="England.png">
<ul style="list-style:none;">
<li><img id="Denmark" src="Denmark.png"></li>
<li><img id="Germany" src="Germany.png"></li>
</ul>
</li>
</ul>
</div>

CSS：

#nav{ /* just for spacing in demo */
position: absolute;
top:10px;
left:524px;
}

#nav > ul > li {
position: relative; /* positioning context */
background: transparent;
display: inline-block;
}

#nav ul ul {
display: none;
position: absolute;
top:100%;
left:0;
background: transparent;
}

#nav ul li:hover ul {
display: block;
}

【讨论】：