admin管理员组

文章数量:1431770

am trying to select a multi select bo box. There i have to customize the property that when mouse over a value the color has to change. I tried few steps i know nut its not working. Suggest me the way how should i handle it. Here is the code.

<html>
<head>
<style type="text/css" >

</style>
<script type="text/javascript">
var a="hidden";
function doset()
{
    if(a=="hidden")
    a="visible";
    else
    a="hidden";
    document.getElementById("myitems").style.visibility = a; 
}
function dochange(a)
{

    document.getElementById(a).style.background-color= 0xff00ff; 
}
</script>
</head>
<body>
<label>ajay</label>
<input type=button value="v" onClick="doset(); return false;"/>
<div id=myitems style='visibility:hidden'>
<select multiple="multiple" >
<option id= prav1 onMouseover="dochange(this.id); return true;">ajay</option>
<option id= prav2 onMouseover="dochange(this.id); return true;">musthafa</option>
<option id= prav3 onMouseover="dochange(this.id); return true;">praveen</option>
<option id= prav4 onMouseover="dochange(this.id); return true;">shruthy</option>
<option id= prav5 onMouseover="dochange(this.id); return true;">vasanth sir</option>
</select>
</div>
</body>
</html>

am trying to select a multi select bo box. There i have to customize the property that when mouse over a value the color has to change. I tried few steps i know nut its not working. Suggest me the way how should i handle it. Here is the code.

<html>
<head>
<style type="text/css" >

</style>
<script type="text/javascript">
var a="hidden";
function doset()
{
    if(a=="hidden")
    a="visible";
    else
    a="hidden";
    document.getElementById("myitems").style.visibility = a; 
}
function dochange(a)
{

    document.getElementById(a).style.background-color= 0xff00ff; 
}
</script>
</head>
<body>
<label>ajay</label>
<input type=button value="v" onClick="doset(); return false;"/>
<div id=myitems style='visibility:hidden'>
<select multiple="multiple" >
<option id= prav1 onMouseover="dochange(this.id); return true;">ajay</option>
<option id= prav2 onMouseover="dochange(this.id); return true;">musthafa</option>
<option id= prav3 onMouseover="dochange(this.id); return true;">praveen</option>
<option id= prav4 onMouseover="dochange(this.id); return true;">shruthy</option>
<option id= prav5 onMouseover="dochange(this.id); return true;">vasanth sir</option>
</select>
</div>
</body>
</html>
Share Improve this question asked Aug 7, 2012 at 4:23 Praveen SinghPraveen Singh 5422 gold badges10 silver badges23 bronze badges 2
  • @ It should be backgroundColor instead of background-color, See my answer below. – Ahsan Khurshid Commented Aug 7, 2012 at 4:28
  • updated my answer with working example. – Ahsan Khurshid Commented Aug 7, 2012 at 4:45
Add a ment  | 

4 Answers 4

Reset to default 3

It is backgroundColor instead of background-color

document.getElementById(a).style.backgroundColor= "#ff00ff";

SEE A WORKING DEMO

document.getElementById(a).style.background= "#ff00ff";

function dochange(a) 
{ 
  document.getElementById(a).style.backgroundColor = "#ff00ff";  
} 

"document.getElementById(a).style.background-color" is wrong Have to be: "document.getElementById(a).style.backgroundColor"

本文标签: javascriptchange color on mouseover select menuStack Overflow