CODEWITHSUNDEEP
jqueryhtmlmouseovermouseout
Always_a_learner
Always_a_learner

Reputation: 5055

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>

Now I want that when i hover over the menu_small_item, the menu_large_item part shows and when I mouse out from menu_small_item, then menu_large_item part hides. Same is happening but in case of last item in my html, when I take my mouse out from downwards nothing happens.

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');       
});

I have implemented the same on

https://jsfiddle.net/shilpi_jas/nh1n4pcv/ Any help will be appreciated.

Upvotes: 5

Views: 242

Answers (2)

Laurent S.
Laurent S.

Reputation: 6946

I have the feeling the complicated HTML+CSS structure (with use of floats and so on) somehow is causing this. If you inspect your code with developer tools, you can see the overlay when you hover each element composing your HTML is most of the time not at the right place. I then thought about a no-js solution which from where I see it is very similar to your functionality, with a much simpler HTML... and no javascript to fail. Here's my proposition that you can hopefully fit into your application, or at least take inspiration from :

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;}

And the fiddle for demo

Upvotes: 1

John R
John R

Reputation: 2791

Use fadeTo method of jQuery instead of using show and hide method. Because mouseout event will not trigger for the hidden elements.

But this fadeTo method will changes the opacity of the element for showing and hiding it and hence all mouse events will trigger in this scenario.

Please refer this doc

Use fadeTo(1, 1) instead of show() and fadeTo(1, 0) instead of hide()

Upvotes: 1

Related Questions