Please help noob with hover &/or click.
Hi all,
I'm trying to change the background color of a specific div when the mouse hovers over several seperately colored divs (like previews), and I want the specific div's color to return to white if the mouse moves away from the colored divs unless one of the colored divs are clicked.
In the case that one of the colored divs have been clicked, then I want the specific div's background color to return to the clicked color instead of white. This needs to be a constant behavior, meaning that I should be able to constantly hover to see a temporary color change and click to lock in the color change, while at any time if I move my mouse away from the colored divs my last clicked selection should be revealed.
Below is my first attempt at the code. If I remove the "if else" then it will return to white when the mouse moves away, but I need it to remember the clicked color (if any) and return to that color so that if a color is clicked it will be locked in until another color is clicked while maintaining the ability to hover over to preview other colors.
-
<script type="text/javascript">
$(document).ready(function() {
$("#colors ul li a").hover(
function () {
var color = $(this).css("background-color");
$("#cfilter").css({'background-color' : color});
}, function () {
if ($(clkclr).is(.css({'background-color' : 'red, orange, yellow, green, blue, gray, white'}))) {$("#cfilter").css({'background-color' : clkclr});
} else { $("#cfilter").css({'background-color' : 'white'});
}).click(
function () {
var clkclr = $(this).css("background-color");
$("#cfilter").css({'background-color' : clkclr});
});
});
</script>
And below is the working demo without the "click to lock in the color selection"
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type" />
<title>mouseover color changer with preview</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#colors ul li a").hover(
function () {
var color = $(this).css("background-color");
$("#cfilter").css({'background-color' : color});
}, function () {
$("#cfilter").css({'background-color' : 'white'});
});
});
</script>
<style media="screen" type="text/css">
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;
}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;
}
#colors_cont {
display: block;
}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;
}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;
}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;
}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;
}
</style>
</head>
<body style="direction: ltr;">
<div id="customize">Mouse over color blocks to see the
design in available colors.
<div id="colors">
<ul>
<li><a href="#"
style="background-color: red; color: red;">.</a></li>
<li><a href="#"
style="background-color: orange; color: orange;">.</a></li>
<li><a href="#"
style="background-color: yellow; color: yellow;">.</a></li>
<li><a href="#"
style="background-color: green; color: green;">.</a></li>
<li><a href="#"
style="background-color: blue; color: blue;">.</a></li>
<li><a href="#"
style="background-color: gray; color: gray;">.</a></li>
</ul>
</div>
</div>
<div id="cfilter"></div>
</body>
</html>
Any advice is greatly appreciated.
Thanks in advance.