鼠标移开不适用于所有方向
Mouse out is not working with all directions
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/
任何帮助将不胜感激。
使用 jQuery 的 fadeTo
方法,而不是使用 show
和 hide
方法。因为mouseout
隐藏元素不会触发事件。
但是这个 fadeTo
方法会改变元素的不透明度以显示和隐藏它,因此在这种情况下所有鼠标事件都会触发。
请参考这个doc
使用fadeTo(1, 1)
代替show()
,使用fadeTo(1, 0)
代替hide()
我觉得复杂的 HTML+CSS 结构(使用浮点数等)不知何故造成了这种情况。如果您使用开发人员工具检查您的代码,当您将鼠标悬停在构成 HTML 的每个元素时,您可以看到叠加层,大多数情况下,这些元素不在正确的位置。然后我想到了一个无 js 解决方案,从我看来它与您的功能非常相似,具有更简单的 HTML... 并且没有 javascript 失败。这是我的建议,您可以希望适合您的应用程序,或者至少从中获得灵感:
HTML
<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;}
和the fiddle演示
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/ 任何帮助将不胜感激。
使用 jQuery 的 fadeTo
方法,而不是使用 show
和 hide
方法。因为mouseout
隐藏元素不会触发事件。
但是这个 fadeTo
方法会改变元素的不透明度以显示和隐藏它,因此在这种情况下所有鼠标事件都会触发。
请参考这个doc
使用fadeTo(1, 1)
代替show()
,使用fadeTo(1, 0)
代替hide()
我觉得复杂的 HTML+CSS 结构(使用浮点数等)不知何故造成了这种情况。如果您使用开发人员工具检查您的代码,当您将鼠标悬停在构成 HTML 的每个元素时,您可以看到叠加层,大多数情况下,这些元素不在正确的位置。然后我想到了一个无 js 解决方案,从我看来它与您的功能非常相似,具有更简单的 HTML... 并且没有 javascript 失败。这是我的建议,您可以希望适合您的应用程序,或者至少从中获得灵感:
HTML
<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;}
和the fiddle演示