By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,010 Members | 2,774 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,010 IT Pros & Developers. It's quick & easy.

CSS OnMouseOver

P: 2
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
Share this Question
Share on Google+
8 Replies


P: 8
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

P: 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

P: 8
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

P: 3
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

P: 3
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

P: 10
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

P: 3
Thank you very much!!!
Oct 29 '06 #8

P: 1
@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.