How do i do this with hover effect with javascript/jquery?
Question
So i am slightly new to JS and jQuery, but i know html and css very well. I want to know if this is possible to do.
I have some HTML code for a nav in an info area. I have it all set up and I have it so it calls a function on mouseover, this function turns the color of the link to white. And for mouseout it turns it black again. Now I know you can probably do this with css but I need the practice for Js/jQuery. I wrote some code and it works and all but instead it colors all the colors white and it blends in, test the code and you will see. Is there a way to only choose the selected button and color only that one. maybe with an array or something?? I dont really need to know if there is a way to do it with css, i just need to get into the 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 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 only screen and (min-width: 150px) and (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 {} }
<!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 one of the 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>
2 answers
solution1
0 2015-03-21 02:16:11
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 only screen and (min-width: 150px) and (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 one of the 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>
solution2
0 2015-03-21 02:23:30
Yes there is a way, but if you are using jQuery you'd be better hooking to the events in a jQuery way, so remove those onmouseover="colorLink()" and onmouseout="colorLinkOut()" from the html and replace your javascript for
$(function(){
$(".infoNav li").mouseover(function(){
$(this).find("a").css("color", "white");
});
$(".infoNav li").mouseout(function(){
$(this).find("a").css("color", "black");
});
});
by hooking through jQuery instead of plain javascript you can now use the "this" keyword as a reference to the element that generated the event, that's why $(this) works here, but would not work your previous code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how can i do this jquery hover effect?
how do I modify a :hover style using JavaScript / jQuery?
How do I do the image mouse hover effect?
How do I change this element from a hover to a click effect using jQuery?
Javascript (jQuery) flasher effect: how to do that?
How do I disable hover effect for a particular element inside a div?
How do i re-enable link hover effect
How do I display modal images with hover effect captions?
How do I achieve a hover over image effect?
How do I remove a hover effect if the Element has focus?
Related Tags