Jump to content


Photo

onMouseOver-commands in CSS?


  • Please log in to reply
8 replies to this topic

#1 knuhe

knuhe
  • Members
  • PipPip
  • Member
  • 10 posts

Posted 07 May 2006 - 04:33 PM

Hello, I'm new to CSS, and also new on this community.

I'm trying to figure out how to place a onMouseOver command into one of my stylesheets.
In this example I want my table column to change color when i move my mouse over it.

This is the code I've made so far:

.menytabell {
       width: 149px;
       height: 14px;
       background-color: #EEEEEE;
}

Now here comes my problems... I that code to match this equivalent, so I can save space and make my menu editings go faster:

<td width=149 height="14" style="background-color:#EEEEEE" onMouseOver="this.style.backgroundColor='#FFFFF0'" onMouseOut="this.style.backgroundColor='#EEEEEE'">

Can any of you help me out?

Cheers


#2 neylitalo

neylitalo
  • Staff Alumni
  • Advanced Member
  • 1,854 posts
  • LocationMichigan, USA

Posted 07 May 2006 - 04:46 PM

.menytabell {
       width: 149px;
       height: 14px;
       background-color: #EEEEEE;
}

.menytabell:hover {
       background-color: #FFFFF0;
}

the :hover pseudo class gets activated when you mouseover, and deactivated when you mouseout.

http://nealylitalo.net - My personal website, and home of The Netizen's Journal.

#3 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 07 May 2006 - 04:50 PM

Yes use the :hover persuado class.

NOTE: currently IE6 doesn't support the :hover persuado class on any tag accept the anchor (a) tag, but IE7 now supports the :hover persuado class on any tag.

#4 knuhe

knuhe
  • Members
  • PipPip
  • Member
  • 10 posts

Posted 07 May 2006 - 04:56 PM

Thanks, I tried your solution, and it ought to work, but sadly it won't:(
It sees like it sticks with the

.menytabell {
       width: 149px;
       height: 14px;
       background-color: #EEEEEE;
}

and not changing the color when i move my cursor over the table element.

Do you know whats going on?

#5 neylitalo

neylitalo
  • Staff Alumni
  • Advanced Member
  • 1,854 posts
  • LocationMichigan, USA

Posted 07 May 2006 - 04:57 PM

See wildteen's post above :)
http://nealylitalo.net - My personal website, and home of The Netizen's Journal.

#6 knuhe

knuhe
  • Members
  • PipPip
  • Member
  • 10 posts

Posted 07 May 2006 - 04:57 PM

[!--quoteo(post=372055:date=May 7 2006, 06:50 PM:name=wildteen88)--][div class=\'quotetop\']QUOTE(wildteen88 @ May 7 2006, 06:50 PM) View Post[/div][div class=\'quotemain\'][!--quotec--]
Yes use the :hover persuado class.

NOTE: currently IE6 doesn't support the :hover persuado class on any tag accept the anchor (a) tag, but IE7 now supports the :hover persuado class on any tag.
[/quote]

Do you know is this altso applies to Firefox? I'm using version 1.5.0.3.

#7 neylitalo

neylitalo
  • Staff Alumni
  • Advanced Member
  • 1,854 posts
  • LocationMichigan, USA

Posted 07 May 2006 - 05:01 PM

It works for me -
Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

http://nealylitalo.net - My personal website, and home of The Netizen's Journal.

#8 knuhe

knuhe
  • Members
  • PipPip
  • Member
  • 10 posts

Posted 07 May 2006 - 05:16 PM

Strange...

Have tried a few things, but it don't seem to work right.

Maybe it's my code in the HTML-file that's wrong?
Is this the right way to do it when I want a row in my table to change color when pointing at it?

<table>
<tr onclick=view('./index.html') height="14">
    <td class="menytabell">
          <div class="meny">Hovedsiden</div>
    </td>
<tr>
</table>


#9 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 25 May 2006 - 08:35 AM

Just remove the background-color from the class in you style sheet.

If that doesn't work, just make another class with the different background color and use the this.className='whatever' on the mouse event.

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users