javascript - Jquery hover function show and hide element -

-

i have hover function shows , hides sub menus until person hovers on them.

problem when try move mouse down menu shows disappears again.

can point out im doing wrong here.?

$(document).ready(function() {    $('.menu-link > a').hover(function() {      $(this).next('.menu').show();    }, function() {      $(this).next('.menu').hide();    });  });
nav {    position: fixed;    top: 0;    left: 0;    width: 100%;    /*background-color: #333333;*/    background-color: transparent;    transition: 0.2s;  }  nav ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    background-color: transparent;    display: inline-block;  }  nav ul li {    float: left;  }  nav ul li a.link {    display: block;    color: black;    text-align: center;    padding: 24px 16px;    text-decoration: none;    transition: 0.2s;    font-weight: bold;    text-transform: uppercase;    position: relative;  }  nav ul li div.arrow-down {    float: right;    width: 0;    height: 0;    margin-left: 5px;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 5px solid #fff;    margin-top: 10px;    transition: 0.2s;  }  nav ul li div.menu {    display: none;    z-index: 999;    position: relative;    background-color: #fff;    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);    padding: 15px 0;    margin-top: -15px;  }  nav ul li div.menu {    color: #333333;    padding-left: 15px;  }  nav ul li a.link:hover {    color: #808080;    text-decoration: none;    transition: 0.2s;  }  nav ul li a.link:hover div.arrow-down {    border-top: 5px solid #808080;    transition: 0.2s;  }  nav ul li:first-child {    padding-left: 100px;  }  nav ul.right {    float: right;  }  nav ul.right li:last-child {    padding-right: 100px;  }  nav.color {    background-color: #333333;    transition: 0.2s;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav>    <ul class="left">      <li class="menu-link">        <a href="" class="link">home</a>        <div class="menu">          <a href="">subcat.title</a>        </div>      </li>      <li class="menu-link">        <a href="" class="link">test</a>        <div class="menu">          <a href="">subcat.title</a>        </div>      </li>    </ul>    <ul class="right">      <li><a href="/">basket</a>      </li>    </ul>  </nav>

the issue because event attached a element, therefore when user tries mouse on menu appears mouseout part of hover called on a , js code tries hide menu again. fix this, attach hover() event element holds both a , menu. in case, .menu-link element itself. need change next() find() cater change. try this:

$(document).ready(function() {    $('.menu-link').hover(function() {      $(this).find('.menu').show();    }, function() {      $(this).find('.menu').hide();    });  });
nav {    position: fixed;    top: 0;    left: 0;    width: 100%;    /*background-color: #333333;*/    background-color: transparent;    transition: 0.2s;  }  nav ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    background-color: transparent;    display: inline-block;  }  nav ul li {    float: left;  }  nav ul li a.link {    display: block;    color: black;    text-align: center;    padding: 24px 16px;    text-decoration: none;    transition: 0.2s;    font-weight: bold;    text-transform: uppercase;    position: relative;  }  nav ul li div.arrow-down {    float: right;    width: 0;    height: 0;    margin-left: 5px;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 5px solid #fff;    margin-top: 10px;    transition: 0.2s;  }  nav ul li div.menu {    display: none;    z-index: 999;    position: relative;    background-color: #fff;    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);    padding: 15px 0;    margin-top: -15px;  }  nav ul li div.menu {    color: #333333;    padding-left: 15px;  }  nav ul li a.link:hover {    color: #808080;    text-decoration: none;    transition: 0.2s;  }  nav ul li a.link:hover div.arrow-down {    border-top: 5px solid #808080;    transition: 0.2s;  }  nav ul li:first-child {    padding-left: 100px;  }  nav ul.right {    float: right;  }  nav ul.right li:last-child {    padding-right: 100px;  }  nav.color {    background-color: #333333;    transition: 0.2s;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav>    <ul class="left">      <li class="menu-link">        <a href="" class="link">home</a>        <div class="menu">          <a href="">subcat.title</a>        </div>      </li>      <li class="menu-link">        <a href="" class="link">test</a>        <div class="menu">          <a href="">subcat.title</a>        </div>      </li>    </ul>    <ul class="right">      <li><a href="/">basket</a>      </li>    </ul>  </nav>

also note can achieve in css alone without need js code, remove hover() handler , add line css:

nav ul li:hover div.menu {   display: block; }

Comments

Post a Comment

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

-
i'm trying load balancing of application in bluemix using custom domain , srv record in dns manager. created own doamin ccbluemix.dynu.com , added custom domain bluemix. created application in region , created route custom domain myapp.ccbluemix.dynu.com deployed same application in uk region , created route custom domain myapp.ccbluemix.dynu.com there well. now whenever user hits route want load balancing between , uk region alternate requests served , uk regions. for created srv records like _http._tcp.ccbluemix.dynu.com srv eu-gb.mybluemix.net [priority: 0] [weight: 50] 10 _http._tcp.ccbluemix.dynu.com srv mybluemix.net [priority: 0] [weight: 50] 10 but nothing happening , i'm not able access application using custom route @ all. if create 'a' record cc-load-bal-app.ccbluemix.dynu.com 75.126.81.68 i can access app using custom route ends hitting server. how can achieve load balancing using srv records? wrong creating srv records here? i read ne...
Read more

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

-
my cursor : select xzis.msisdn msisdn, xzis.in_account_number in_account_number xxobw_zte_in_sync xzis not exists (select 1 hz_contact_points hcp, hz_cust_accounts hca hcp.owner_table_id = hca.party_id , hcp.owner_table_name = 'hz_parties' , hcp.phone_number = substr (xzis.msisdn, -8) , nvl (hca.attribute12, 'nil') = xzis.in_account_number); i have given alias columns, still facing issue. suggestions? it's cursor. 1 has no such problems. problem is, when you're joining 2 tables, or apply wrong aliases in subselect, cursor may @ end return 2 columns same name/alias. the problem not need alias, no 2 columns can have same alias (the name counting alias, when no alias given). apparently has happened, far can tell, it's ...
Read more

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -

-
Image
i getting same error when python manage.py runserver. there no such error when have ubuntu 15.10. got started when upgraded ubuntu 16.04. question might duplicate have tried solution provided question have applied command dpkg --configure -a, have done apt-get update,upgrade,dist-upgrade, clean, -f install. have reinstalled python2.7 , python3 no success though. here screenshot while trying run django application i got after re-installing python please me? bashrc file # ~/.bashrc: executed bash(1) non-login shells. # see /usr/share/doc/bash/examples/startup-files (in package bash-doc) # examples # if not running interactively, don't case $- in *i*) ;; *) return;; esac export pythonhome="/usr/bin/python" echo $virtualenvwrapper_python echo 'tushant' # don't put duplicate lines or lines starting space in history. # see bash(1) more options histcontrol=ignoreboth # append history file, don't overwrite shopt -s histappend # setting h...
Read more