html - Jquery .click event handler not working for class selector in CHROME -
when try set same opacity mouseover when .click event occurs, doesn't work.
what i've tried: -different selectors (li, menu:li, li:a, .li-navclass, nav-text)
help appreciated. thank in advance!
.container { position: absolute; background:url('../images/bgpic.png'); background-repeat: no-repeat; background-size: cover; margin: 0px; padding: 0px; height: 100%; width: 100%; } .wrapper { position: relative; margin: auto; padding: auto; height: 655px; width: 900px; } .titlehdr { margin: 0px; padding: 0px; display: inline-block; width: 897px; height: 110px; } .title-div { display: inline-block; position: relative; height: 100%; width: 90px; margin: 0px; padding: 0px; } .title { position: relative; top: 40px; margin: 0px; padding: 0px; font-size: 70px; color: white; font-family: mesquite std; letter-spacing: 1.2px; } .barandgrill-div { display: inline-block; vertical-align: bottom; } .barandgrill-text { margin: 0px; padding: 0px; font-family: arial; font-weight: bold; } /*---------------nav menu----------------*/ .menu { padding-left: 0px; margin-left: 0px; font-size: 15px; } .nav-container { text-align: center; display: block; top: 100px; margin: 0px; padding: 0px; width: 900px; height: 40px; background-color: #901423; border-style: solid; border-width: 1px; border-color: #111111; } .menu { display: inline-block; text-align: center; margin: auto; padding: auto; list-style-type: none; overflow: hidden; font-color: #000000; } .li-navclass { border-bottom: 1px solid #000; } li { display: inline-block; position: relative; padding: 0 1em; font-size: 150%; } .nav-text { color: #ffffff; font-weight: bold; opacity: .3; } .nav-container ul { text-decoration: none; word-spacing: 200px; margin: 0px; padding: 0px; font-size: 20px; font-family: segoe script; } /*---------------content----------------*/ .content { display: block; width: 900px; height: 500px; border-style: solid; border-width: 1px; background-color: #111111; opacity: 0.6; } /*---------------footer------------------*/ .foot { text-decoration: none; list-style-type: none; display: block; position: relative; text-align: center; font-size: 12px; } .ftr-button { position: relative; top: -5px; list-style: none; text-decoration: none; color: rgb(147, 104, 55); } .ftr-links { text-decoration: none; list-style-type: none; } .vert-line { height: 13px; border-right: 1px solid #909090; }<!doctype html> <html lang="en"> <head> <title>sticky navigation tutorial</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" media="screen, projection" href="css/screen.css"/> </head> <body> <div class="container"> <div class="wrapper"> <!--title--> <div class="titlehdr"> <div class="title-div"> <p class="title">donatelo's</p> </div> <div class="barandgrill-div"> <p class="barandgrill-text">mediterranean bar , grill</p> </div> </div> <!--navigation menu--> <div class="nav-container"> <ul class="menu"> <li class="li-navclass"><a href="index.html" class="nav-text">story</a></li> <li class="li-navclass"><a href="menu.html" class="nav-text">menu</a></li> <li class="li-navclass"><a href="gallery.html" class="nav-text">gallery</a></li> <li class="li-navclass"><a href="catering.html" class="nav-text">catering</a></li> <li class="li-navclass"><a href="contact.html" class="nav-text">contact</a></li> </ul> </div> <!--grey box--> <div class="content"> <div id="sidebar"> <div id="scroller"> </div> </div> </div> <!--footer--> <div class="foot"> <ul class="ftr-links"> <li class="vert-line"><a href="index.html" class="ftr-button">story</a></li> <li class="vert-line"><a href="menu.html" class="ftr-button">menu</a></li> <li class="vert-line"><a href="gallery.html" class="ftr-button">gallery</a></li> <li class="vert-line"><a href="catering.html" class="ftr-button">catering</a></li> <li class="vert-line"><a href="contact.html" class="ftr-button">contact</a></li> </ul> <p class="copyright">copyright © 2015 agabi mediterranean restaurant</p> </div> </div> </body> <script> $(document).ready(function(){ $(".nav-text").mouseover(function() { $( ).css( "opacity", ".8" ); }); $(".nav-text").mouseout(function() { $(this).css( "opacity", ".2"); }); $(".ftr-button").mouseover(function() { $(this).css("color", "rgb(132, 131, 129)"); }); $(".ftr-button").mouseout(function() { $(this).css("color", "rgb(147, 104, 55)"); }); $(".nav-text").click(function() { $(this).css("opacity", ".8"); }); }); </script> </html>
this because .nav-text inside tag. click link , new page opened. need preventdefault tag if dont want open new page after click.
do - note, link not work anymore:
$(".nav-text").click(function(event) { event.preventdefault(); $(this).css("opacity", ".8"); }); if isn't looking for, take @ :focus in csshttp://www.w3schools.com/cssref/sel_focus.asp
Comments
Post a Comment