I have 2 dialog mask on my window.
On the fist one I have a drop-down list with different option values.
On the second I have a div table.
I want that when the mouse is over one option in my drop-down list, the background color of the option value on my second mask must be changed and when I leave the background color be restored to white, so that I can know the corresponded feet and meter's value before i selected.
Please look at the screenshot
Not sure if this is what you are looking for but try it
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
//standard mouseover on a list or another set of elements
$("ul>li").mouseover(function(){
cls = $(this).attr("class");
$("td." + cls).addClass("hilite")
}).mouseout(function(){
$("td." + cls).removeClass("hilite")
})
//this is for when you select something from a select box
$("select").change(function(){
$("td." + cls).removeClass("hilite")
cls = $(this).val();
$("td." + cls).addClass("hilite")
})
/*
//this only works in firefox
$("option").mouseover(function(){
cls = $(this).val();
$("td." + cls).addClass("hilite")
}).mouseout(function(){
$("td." + cls).removeClass("hilite")
})
*/
})
</script>
</head>
<body>
<style>
.hilite {
background: yellow;
}
</style>
<div>
<select>
<option value="opt">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
<ul>
<li class="opt">
Option 1
</li>
<li class = "opt2">
Option 2
</li>
<li class="opt3">
Option 3
</li>
</li>
</ul>
</div>
<table>
<tr>
<td class="opt">
Option 1
</td>
<td class="opt2">
Option 2
</td>
<td class="opt3">
Option 3
</td>
</tr>
</table>
</body>
</html>