CSS OnMouseOver

**chipgraphics** · Dec 4 '05, 07:51 AM

CSS :hover pseudo selector is what you need !

Originally posted by ZakRhino

Is there a way to turn this DHTML code into CSS code? If so what is the correct way it should be put in the code?
[HTML]onmouseover="th is.style.backgr oundColor='#006 1D7';" onmouseout="thi s.style.backgro undColor='#3D93 FF';"[/HTML]

The text or object you want to apply those attributes to can be wrapped using the <span></span> tags.
For Example:
[HTML]<span class="someclas sname">Your Text or Object Here</span>[/HTML]
Then the css would be:

Code:

/* this is for the mouse[B]out[/B] and [B]default[/B] settings */

.someclassname {
  background-color: #3D93FF;
}

/* :hover is a pseudo selector to use to set the mouse[B]over[/B] attributes */
.someclassname:hover {
  background-color: #0061D7;
}

I hope this helps.
Let me know if you have any other questions.

~ Chipgraphics

**ZakRhino** · Dec 11 '05, 11:23 AM

Originally posted by chipgraphics

The text or object you want to apply those attributes to can be wrapped using the <span></span> tags.
For Example:
[HTML]<span class="someclas sname">Your Text or Object Here</span>[/HTML]
Then the css would be:

Code:

/* this is for the mouse[B]out[/B] and [B]default[/B] settings */

.someclassname {
  background-color: #3D93FF;
}

/* :hover is a pseudo selector to use to set the mouse[B]over[/B] attributes */
.someclassname:hover {
  background-color: #0061D7;
}

I hope this helps.
Let me know if you have any other questions.

~ Chipgraphics

Yes it helps alot. Just a question, would it be better to have an CSS hover effect vs this effect?

**chipgraphics** · Dec 11 '05, 10:15 PM

It's your preference really.

Yes it helps alot. Just a question, would it be better to have an CSS hover effect vs this effect?

If you want to have the effect still appear even if the user has javascript disabled then use CSS.*note*: If you are applying this to table rows that alternate colors you have to apply the css to the table ROW

for example:
[HTML]<table>
<tr class="someclas s">
<td>foo</td>
</tr>
</table>[/HTML]
Your css looks like this:

Code:

tr.someclass {
background-color: #CCCCCC;
}
tr.someclass:hover {
background-color: #E2E2E2;
}

So if the user has javascript disabled they will still see the :hover effect. At that point it's just a matter of your preference on which to use.

~ Chipgraphics

**jlbribeiro** · Aug 16 '06, 02:02 PM

Hi. I'm doing something like that, but just a little bit different. I have a table (sudoku table, to be precise), and I have a text that talks about different cells, and I would want that when someone put the mouse over the name of the cell (r5c6, or whatever) that cell inverts it's color (text color and background color). I would also like to do this in css. Can someone help me? Thank you very much.

**jlbribeiro** · Aug 16 '06, 02:14 PM

EDIT: PS: I also need to highlight especific parts of the table. Eg: The 2nd block, the 3rd row, the 5th column, etc...

**Gayathriperumal** · Aug 25 '06, 10:42 AM

I have just tried out

insert the below code in a html page and check out

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<table width="45%" height="43" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="20" bordercolor="#FF0000"><a href="#" onMouseOver="MM_showHideLayers('red','','show');" onMouseOut="MM_showHideLayers('red','','hide');" ><font color="#FF0000">Red</font></a></td>
    <td width="20"><a href="#" onMouseOver="MM_showHideLayers('blue','','show')" onMouseOut="MM_showHideLayers('blue','','hide');"><font color="#0000FF">Blue</font> 
      </a></td>
    <td width="20"><a href="#" onMouseOver="MM_showHideLayers('green','','show')" onMouseOut="MM_showHideLayers('green','','hide');"><font color="#00FF00">Green</font></a> 
    </td>
    <td width="20"><a href="#" onMouseOver="MM_showHideLayers('yellow','','show')" onMouseOut="MM_showHideLayers('yellow','','hide');"><font color="#FFFF00">Yellow</font></a></td>
  </tr>
  <tr>
    <td width="20">&nbsp;</td>
    <td width="20">&nbsp;</td>
    <td width="20">&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
<div id="red" style="position:absolute; left:9px; top:33px; width:61px; height:22px; z-index:7; visibility: hidden;" > 
  <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FF0000">
    <tr> 
              
      <td align="center"> 
      </td>
            </tr>
  </table>
</div>
<div id="blue" style="position:absolute; left:71px; top:33px; width:71px; height:22px; z-index:7; visibility: hidden;" > 
  <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#0000FF">
    <tr> 
              
      <td align="center"> 
      </td>
            </tr>
  </table>
</div>
<div id="green" style="position:absolute; left:145px; top:32px; width:100px; height:22px; z-index:7; visibility: hidden;" > 
  <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#00FF00">
    <tr> 
              
      <td align="center"> 
      </td>
            </tr>
  </table>
</div>
<div id="yellow" style="position:absolute; left:248px; top:33px; width:105px; height:22px; z-index:7; visibility: hidden;" > 
  <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FFFF00">
    <tr> 
              
      <td align="center"> 
      </td>
            </tr>
  </table>
</div>
</body>
</html>

**jlbribeiro** · Oct 29 '06, 12:05 PM

Thank you very much!!!

**appuonline** · Nov 11 '09, 06:10 AM

Thanks.. But this is not working on IE8

Originally posted by chipgraphics

If you want to have the effect still appear even if the user has javascript disabled then use CSS.*note*: If you are applying this to table rows that alternate colors you have to apply the css to the table ROW

for example:
[HTML]<table>
<tr class="someclas s">
<td>foo</td>
</tr>
</table>[/HTML]
Your css looks like this:

Code:

tr.someclass {
background-color: #CCCCCC;
}
tr.someclass:hover {
background-color: #E2E2E2;
}

So if the user has javascript disabled they will still see the :hover effect. At that point it's just a matter of your preference on which to use.

~ Chipgraphics

Hi.. This is working perfectly on firefox and chrome.. but not on IE8.. Any solution??

CSS OnMouseOver

CSS OnMouseOver

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment