在悬停时显示 div 并停留直到鼠标离开？

Question

当鼠标悬停在“.socialIcons”上时，我希望 div“.socialIconsShow”淡入，当我将鼠标悬停在“.socialIconsShow”上时，它们淡出。有没有办法让图标在离开“.socialIcons”后保持可见？

<div class="socialNetworks">
          <ul>
            <li><a href="#">Configure</a></li>
            <li><a href="#">Contact</a></li>
            <li class="socialIcons"><a href="#">Follow</a></li>
          </ul>
        </div>
         <div class="socialIconsShow">
          <div class="facebook"></div>
          <div class="twitter"></div>
          <div class="linkedin"></div>
        </div>
       </div>

这是您查看发生了什么情况的链接： http://www.imsmfg.com/new/test/index.php

Answer 1

我相信这与我昨天回复的事情完全相同：

jQuery：将鼠标悬停在 div 上打开子菜单，当鼠标移开时该子菜单应保持打开状态

Answer 2

如果你稍微改变你的标记，你应该被排序。

<div class="socialNetworks">
    <ul>
        <li><a href="#">Configure</a></li>
        <li><a href="#">Contact</a></li>
        <li class="socialIcons">
            <a href="#">Follow</a>
            <!-- Jam these in here -->
            <div class="socialIconsShow">
                <div class="facebook"></div>
                <div class="twitter"></div>
                <div class="linkedin"></div>
            </div>
        </li>
    </ul>
</div>

Answer 3

您可以通过重新构建标记并使用 :hover 选择器来完成此操作，例如 this< /a>.

这不会淡入/淡出。它只会显示/隐藏。