468,242 Members | 1,710 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,242 developers. It's quick & easy.

CSS OnMouseOver

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?


Expand|Select|Wrap|Line Numbers
  1.  
  2. onmouseover="this.style.backgroundColor='#0061D7';" onmouseout="this.style.backgroundColor='#3D93FF';"
  3.  
Nov 30 '05 #1
8 278769
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="this.style.backgroundColor='#0061D7'; " onmouseout="this.style.backgroundColor='#3D93FF';"[/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="someclassname">Your Text or Object Here</span>[/HTML]
Then the css would be:
Expand|Select|Wrap|Line Numbers
  1. /* this is for the mouseout and default settings */
  2.  
  3. .someclassname {
  4.   background-color: #3D93FF;
  5. }
  6.  
  7. /* :hover is a pseudo selector to use to set the mouseover attributes */
  8. .someclassname:hover {
  9.   background-color: #0061D7;
  10. }
  11.  
I hope this helps.
Let me know if you have any other questions.

~ Chipgraphics
Dec 4 '05 #2
The text or object you want to apply those attributes to can be wrapped using the <span></span> tags.
For Example:
[HTML]<span class="someclassname">Your Text or Object Here</span>[/HTML]
Then the css would be:
Expand|Select|Wrap|Line Numbers
  1. /* this is for the mouseout and default settings */
  2.  
  3. .someclassname {
  4.   background-color: #3D93FF;
  5. }
  6.  
  7. /* :hover is a pseudo selector to use to set the mouseover attributes */
  8. .someclassname:hover {
  9.   background-color: #0061D7;
  10. }
  11.  
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?
Dec 11 '05 #3
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="someclass">
<td>foo</td>
</tr>
</table>[/HTML]
Your css looks like this:
Expand|Select|Wrap|Line Numbers
  1. tr.someclass {
  2. background-color: #CCCCCC;
  3. }
  4. tr.someclass:hover {
  5. background-color: #E2E2E2;
  6. }

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
Dec 11 '05 #4
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.
Aug 16 '06 #5
EDIT: PS: I also need to highlight especific parts of the table. Eg: The 2nd block, the 3rd row, the 5th column, etc...
Aug 16 '06 #6
I have just tried out

insert the below code in a html page and check out


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. <!--
  8. function MM_findObj(n, d) { //v4.01
  9.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  10.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  11.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  12.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  13.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  14. }
  15.  
  16. function MM_showHideLayers() { //v6.0
  17.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  18.   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  19.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  20.     obj.visibility=v; }
  21. }
  22. //-->
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <table width="45%" height="43" border="0" cellpadding="0" cellspacing="0">
  28.   <tr> 
  29.     <td width="20" bordercolor="#FF0000"><a href="#" onMouseOver="MM_showHideLayers('red','','show');" onMouseOut="MM_showHideLayers('red','','hide');" ><font color="#FF0000">Red</font></a></td>
  30.     <td width="20"><a href="#" onMouseOver="MM_showHideLayers('blue','','show')" onMouseOut="MM_showHideLayers('blue','','hide');"><font color="#0000FF">Blue</font> 
  31.       </a></td>
  32.     <td width="20"><a href="#" onMouseOver="MM_showHideLayers('green','','show')" onMouseOut="MM_showHideLayers('green','','hide');"><font color="#00FF00">Green</font></a> 
  33.     </td>
  34.     <td width="20"><a href="#" onMouseOver="MM_showHideLayers('yellow','','show')" onMouseOut="MM_showHideLayers('yellow','','hide');"><font color="#FFFF00">Yellow</font></a></td>
  35.   </tr>
  36.   <tr>
  37.     <td width="20">&nbsp;</td>
  38.     <td width="20">&nbsp;</td>
  39.     <td width="20">&nbsp;</td>
  40.     <td width="20">&nbsp;</td>
  41.   </tr>
  42. </table>
  43. <div id="red" style="position:absolute; left:9px; top:33px; width:61px; height:22px; z-index:7; visibility: hidden;" > 
  44.   <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FF0000">
  45.     <tr> 
  46.  
  47.       <td align="center"> 
  48.       </td>
  49.             </tr>
  50.   </table>
  51. </div>
  52. <div id="blue" style="position:absolute; left:71px; top:33px; width:71px; height:22px; z-index:7; visibility: hidden;" > 
  53.   <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#0000FF">
  54.     <tr> 
  55.  
  56.       <td align="center"> 
  57.       </td>
  58.             </tr>
  59.   </table>
  60. </div>
  61. <div id="green" style="position:absolute; left:145px; top:32px; width:100px; height:22px; z-index:7; visibility: hidden;" > 
  62.   <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#00FF00">
  63.     <tr> 
  64.  
  65.       <td align="center"> 
  66.       </td>
  67.             </tr>
  68.   </table>
  69. </div>
  70. <div id="yellow" style="position:absolute; left:248px; top:33px; width:105px; height:22px; z-index:7; visibility: hidden;" > 
  71.   <table width="100%" height="100%" border="0"cellpadding="4" cellspacing="0" bgcolor="#FFFF00">
  72.     <tr> 
  73.  
  74.       <td align="center"> 
  75.       </td>
  76.             </tr>
  77.   </table>
  78. </div>
  79. </body>
  80. </html>
Aug 25 '06 #7
Thank you very much!!!
Oct 29 '06 #8
@chipgraphics
Hi.. This is working perfectly on firefox and chrome.. but not on IE8.. Any solution??
Nov 11 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by laurie | last post: by
7 posts views Thread by Richard | last post: by
7 posts views Thread by windandwaves | last post: by
2 posts views Thread by news.west.cox.net | last post: by
3 posts views Thread by drjackk | last post: by
2 posts views Thread by Justin Rowe | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.