473,224 Members | 1,534 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

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 280078
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

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

Similar topics

4
by: laurie | last post by:
Hi. I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal scroll bar is used to move the thumbnails from left to right. ...
7
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...
7
by: windandwaves | last post by:
Hi Gurus I am trying to make this rather complicated maps with an a huge number of mouseovers and the like. I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for...
2
by: news.west.cox.net | last post by:
I have been writing a practice sliding div navigation script. I am finding myself in the position where I need to force a div into showing the hover behavior defined in css. So my question is...
3
by: drjackk | last post by:
Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg"...
2
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
7
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
2
by: Justin Rowe | last post by:
I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...
1
by: den2005 | last post by:
Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1"...
3
by: oopaevah | last post by:
I have written some dom code to create a list of divs, each with it's own id. I want to set the onmouseover and onmouseout events to highlight the div when the mouse is over it. However I cannot...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.