<!doctype HTML>
<html>
<head>
<title>HUSTLE PAY$</title>
<meta name="viewport" content="width = device - width, initial scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Looking to implement some jQuery effects:
I want to change the background color and font color of an LI element on hover. Although the background color changes successfully, I'm struggling with changing the font color to white.
The original list colors should return once the hover effect is removed.
$(document).ready(function(){ $('li').hover(function(){ $(this).css({"background-color" : "#0066cc" , "color" : "white"}) },function(){ $(this).css({"background-color" : "#0000cc" , "color" : "black"}) }); })
My current jQuery script doesn't seem to work properly. Any ideas on what needs to be changed to make it function correctly?
.menu{
display:inline;
float:left;
width:10%;
}
ul{
background-color:#0000cc;
display:inline;
float:left;
border:1px solid black;
width:60%;
height:100px;
text-align:center;
}
li{
border:1px solid red;
list-style-type:none;
padding-left:0px;
padding-right:0px;
height:30px;
font-size:30px;
text-align:center;
}
a{
color:black;
}
</style>
</head>
<body>
<header>
<div>
<img src = "greenProject/images/menu.jpeg" class = "menu" alt = "Image not available">
</div>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">About Us</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</header>
</body>
</html>