鼠标移出不适用于所有方向

Question

HTML

<!--DASHBOARD-->
   <li class="always_show">
      <span class="menu_large_item" style="display: none;">
          <a href="/xyz/dashboard">
             <div class="ribbon-body-prof-menu">Dashboard</div>
          </a>
      </span>
      <a class="menu_small_item" href="/dashboard"> V </a>
    </li>
 <!--DASHBOARD-->


<!--PROFILE -->
    <li class="always_show" id="profile_menu_item">  
        <span class="menu_large_item" style="display: none;">
            <a href="/xyz/profile/iprofile/id/3">
                <div class="ribbon-body-prof-menu"> Profile</div>
            </a>
 <!--PROFILE -->
        </span>
        <a class="menu_small_item" class="selected" href="/profile/iprofile/id/3">

<!-- <img src="http://localhost/xyz/public/images/icon-industries.png" alt="Profile" title="Profile" width="12" height="15"> -->
                    N
        </a>
     </li>

现在我希望当我将鼠标悬停在 上时menu_small_item，该menu_large_item部分会显示，当我将鼠标移出 时menu_small_item，menu_large_item部分会隐藏。同样的事情正在发生，但在我的 html 中的最后一项的情况下，当我从下方取出鼠标时，什么也没有发生。

jQuery：

    $('li.always_show, a.menu_small_item').mouseover(function(){
        $(this).siblings('li.always_show span.menu_large_item').show();
    $(this).siblings('span').children('a').children('div.ribbon-body-prof-menu').show();
});
$('li.always_show span.menu_large_item, .ribbon-body-prof-menu').mouseout(function(){
    $(this).hide();
    $('li.always_show span.menu_large_item').hide();
    $('div.ribbon-body-prof-menu').css('display','none');       
});

我已经实施了相同的

https://jsfiddle.net/shilpi_jas/nh1n4pcv/ 任何帮助将不胜感激。

Answer 1

我感觉复杂的 HTML+CSS 结构（使用浮动等）在某种程度上导致了这种情况。如果您使用开发人员工具检查您的代码，当您将鼠标悬停在组成 HTML 的每个元素上时，您会看到叠加层大多数时候不在正确的位置。然后我想到了一个 no-js 解决方案，从那里我看到它与您的功能非常相似，具有更简单的 HTML...并且没有 javascript 失败。这是我的建议，希望您可以适合您的应用程序，或者至少从中获得灵感：

超文本标记语言

<ul>
    <li>
        <a class="menu_small_item" href="#">A</a>
        <a class="menu_large_item" href="#">Lorem</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">B</a>
        <a class="menu_large_item" href="#">Ipsum</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">C</a>
        <a class="menu_large_item" href="#">Dolor</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">D</a>
        <a class="menu_large_item" href="#">Sit</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">E</a>
        <a class="menu_large_item" href="#">Amet</a>
    </li>
<ul>

CSS

ul {list-style-type:none;width:100px;}
li {margin-bottom:15px;cursor:pointer;}
li a {display:block;width:85px;padding:5px;text-decoration: none;}
.menu_small_item { color: #b084e9;}
.menu_large_item { display: none;color: #fff;background: #4D356F;box-sizing: border-box;}
li:hover > .menu_small_item {display:none;}
li:hover > .menu_large_item {display:block;}

和演示的小提琴