How do i do this with hover effect with javascript/jquery? -
so new js , jquery, know html , css well. want know if possible do.
i have html code nav in info area. have set , have calls function on mouseover, function turns color of link white. , mouseout turns black again. know can css need practice js/jquery. wrote code , works , instead colors colors white , blends in, test code , see. there way choose selected button , color one. maybe array or something?? dont need know if there way css, need habit of using js/jquery.
code:
function colorlink() { $(".infonav nav ul li a").css("color", "white"); } function colorlinkout() { $(".infonav nav ul li a").css("color", "black"); }* { margin: 0px; padding: 0px; } .header-wrap { position: fixed; } .fixed { position: fixed; top: 0; left: 0; width: 100%; background-color: transparent; } body { background: #ccc; width: 70%; margin-left: 20%; margin-top: 0px; height: 900px; } .mainheader { padding: 0; background: #666; height: 36px; width: 100%; border-radius: 5px; position: relative; top: 150px; left: -70px; box-shadow: 10px 10px 10px #767373; } .mainheader nav ul li { display: inline-block; list-style: none; margin: 10px 0px 0px -30px; margin-left: 15px; position: relative; top: -128px; left: 10px; } .mainheader nav ul li { text-decoration: none; border-radius: 3px; color: white; padding: 7px 20px 10px 20px; margin-right: -15px; font-family: 'eras itc'; } .mainheader nav ul li a:hover { background: #f18529; } .mainheader nav ul .active { background: #f18529; } .maininfo { background: white; height: 500px; width: 100%; position: relative; top: 200px; left: -70px; border-radius: 5px; box-shadow: 10px 10px 10px #727272; } .maininfo .miinfo p { font-family: arial; padding: 10px 10px 10px 10px; text-align: left; } .mainheader .logoarea p { position: relative; top: -100px; } .mainheader .logoarea img { position: relative; top: -130px; left: 130px; } .infonav nav ul li { list-style: none; border: 2px solid black; padding: 30px; border-radius: 20px; width: 140px; text-align: center; margin-top: 30px; position: relative; left: 35%; } .infonav nav ul li:hover { background: #f18529; color: white; } .infonav nav ul li { text-decoration: none; color: black; font-family: broadway; font-size: 30px; } @media screen , (min-width: 150px) , (max-width: 600px) { body { width: 100%; } .mainheader { padding: 0; background: #666; height: 70px; width: 80%; border-radius: 5px; position: relative; top: 150px; left: -70px; list-style-type: none; } .mainheader nav ul li { text-align: center; height: 100%; word-break: break-all; } .mainheader nav ul li { width: 100%; height: 20px; padding: 10px 5px; display: inline-block; margin: 10px; } .maininfo { background: white; height: 300px; width: 80%; position: relative; top: 200px; left: -70px; border-radius: 5px; box-shadow: 10px 10px 10px #727272; } .maininfo .miinfo {} }<!doctype html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <meta charset="utf-8" /> <title>website</title> </head> <body class="body"> <header class="mainheader"> <div class="logoarea"> <img alt="logo" src="logo.jpg" width="250px" height="120px"> </div> <nav> <ul> <li><a class="active" href="index.html">home<br/></a> </li> <li><a href="about.html">about<br/></a> </li> <li><a href="random.html">random</a> </li> </ul> </nav> </header> </div> <div class="maininfo"> <div class="miinfo"> <p>please choose 1 of catagories below:)</p> <div class="infonav"> <nav> <ul> <li onmouseover="colorlink()" onmouseout="colorlinkout()"><a href="index.html">home<br/></a> </li> <li onmouseover="colorlink()" onmouseout="colorlinkout()"><a href="about.html">about<br/></a> </li> <li onmouseover="colorlink()" onmouseout="colorlinkout()"><a href="random.html">random</a> </li> </ul> </nav> </div> </div> </div> </body> </html>
use hover
function colorlink(){ $(this).find("a").css("color", "red"); } function colorlinkout(){ $(this).find("a").css("color", "green"); } $('.infonav nav li').hover(colorlink, colorlinkout); *{margin: 0px; padding: 0px;} .header-wrap{ position: fixed; } .fixed{ position: fixed; top: 0; left: 0; width: 100%; background-color: transparent; } body{ background:#ccc; width: 70%; margin-left: 20%; margin-top: 0px; height: 900px; } .mainheader{ padding: 0; background:#666; height:36px; width:100%; border-radius: 5px; position: relative; top: 150px; left: -70px; box-shadow: 10px 10px 10px #767373; } .mainheader nav ul li{ display:inline-block; list-style:none; margin: 10px 0px 0px -30px; margin-left: 15px; position: relative; top: -128px; left: 10px; } .mainheader nav ul li a{ text-decoration: none; border-radius: 3px; color: white; padding: 7px 20px 10px 20px; margin-right: -15px; font-family: 'eras itc'; } .mainheader nav ul li a:hover{ background: #f18529; } .mainheader nav ul .active { background: #f18529; } .maininfo{ background:white; height: 500px; width: 100%; position: relative; top: 200px; left: -70px; border-radius: 5px; box-shadow: 10px 10px 10px #727272 ; } .maininfo .miinfo p{ font-family: arial; padding: 10px 10px 10px 10px; text-align: left; } .mainheader .logoarea p{ position: relative; top: -100px; } .mainheader .logoarea img{ position: relative; top: -130px; left: 130px; } .infonav nav ul li{ list-style: none; border: 2px solid black; padding: 30px; border-radius: 20px; width: 140px; text-align: center; margin-top: 30px; position: relative; left: 35%; } .infonav nav ul li:hover{ background: #f18529; color: white; } .infonav nav ul li a{ text-decoration: none; color: black; font-family: broadway; font-size:30px; } @media screen , (min-width: 150px) , (max-width: 600px) { body{ width: 100%; } .mainheader{ padding: 0; background:#666; height:70px; width:80%; border-radius: 5px; position: relative; top: 150px; left: -70px; list-style-type: none; } .mainheader nav ul li{ text-align: center; height: 100%; word-break: break-all; } .mainheader nav ul li a{ width: 100%; height: 20px; padding: 10px 5px; display: inline-block; margin: 10px; } .maininfo{ background:white; height: 300px; width:80%; position: relative; top: 200px; left: -70px; border-radius: 5px; box-shadow: 10px 10px 10px #727272; } .maininfo .miinfo{ } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="body"> <header class="mainheader"> <div class="logoarea"> <img alt="logo" src="logo.jpg" width="250px" height="120px"> </div> <nav><ul> <li><a class="active" href="index.html">home<br/></a></li> <li><a href="about.html">about<br/></a></li> <li><a href="random.html">random</a></li> </ul></nav> </header> </div> <div class="maininfo"> <div class="miinfo"> <p>please choose 1 of catagories below:)</p> <div class="infonav"> <nav><ul> <li><a href="index.html">home<br/></a></li> <li><a href="about.html">about<br/></a></li> <li><a href="random.html">random</a></li> </ul></nav> </div> </div> </div> </body>
Comments
Post a Comment