<!DOCTYPE html>
<html>
<head>
<title>Welcome to jQuery #4!</title>
<link rel="stylesheet" href="script04.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="script04.js"></script>
</head>
<body>
<h1 id="colorMe">Pick a color</h1>
<p>
<a id="red">Red</a>
<a id="green">Green</a>
<a id="blue">Blue</a>
</p>
</body>
</html>
a {
display: block;
float: left;
padding: 10px;
margin: 10px;
font-weight: bold;
color: white;
background-color: gray;
}
$(document).ready(function() {
$("a").hover(function() {
$(this).css({
"color": $(this).attr("id"),
"background-color": "silver"
});
});
$("a").mouseout(function() {
$(this).css({
"color": "white",
"background-color": "gray"
});
});
$("a").click(function(evt) {
$("#colorMe").css({
"color": $(this).attr("id")
});
evt.preventDefault();
});
});
Place a hover method on the buttons match the color to the ID
When the hover goes away the color does not stay