Mouse enter/Leave JS

by Paul Schmitt

HTML

<nav id="links" class="menu-closed">
	    <div id="trigger"><a href="#" class="menu-icon">&#9776;</a></div>
              <ul style="float="left">
			  <li><a href="#" title="Home"><img src="images/square-home.png"><span class="hidden">Home</span></a></li>
              <li><a href="#" title="About"><img src="images/square-about-a.png"><span class="hidden">About</span></a></li>
              <li><a href="#" title="Service"><img src="images/square-services-b.png"><span class="hidden">Service</span></a></li>
              <li><a href="#" title="Clients"><img src="images/square-clients-b.png"><span class="hidden">Clients</span></a></li>
              <li><a href="#" title="Portfolio"><img src="images/square-portfolio.png"><span class="hidden">Portfolio</span></a></li>
              <li><a href="#" title="Pricing"><img src="images/square-pricing.png"><span class="hidden">Pricing</span></a></li>
              <li><a href="#" title="Blog"><img src="images/square-blog.png"><span class="hidden">Blog</span></a></li>
              <li><a href="#" title="Contact"><img src="images/square-contact-c.png"><span class="hidden">Contact</span></a></li>
             </ul>
          </nav>

CSS

nav {
    background-color:#333;
}
nav ul { 
    list-style-type: none;
    text-align: left;
    padding-bottom:24px;
}
nav li { 
    font-size:13pt;
    width:100%;
    font-family:sans-serif;
    margin-left:-31px;
    padding-bottom:12px;
    vertical-align:middle;
}
nav a { 
    color: #FFF;
    text-decoration:none;   
}
nav img:hover{
    background-color:red;
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition-delay: background-color .3s;
}
.hover {
    background-color:blue;
}

JavaScript

$("nav li").hover(
function () {
$(this).find("nav img").addClass("hover").end().find('input').focus();            
},
function () {
$(this).find("nav img").removeClass("hover").end().find('input').val('');            
}
);