Jump to content

Archived

This topic is now archived and is closed to further replies.

knuhe

onMouseOver-commands in CSS?

Recommended Posts

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:

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

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

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

Can any of you help me out?

Cheers

Share this post


Link to post
Share on other sites
[code].menytabell {
       width: 149px;
       height: 14px;
       background-color: #EEEEEE;
}

.menytabell:hover {
       background-color: #FFFFF0;
}[/code]

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

Share this post


Link to post
Share on other sites
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.

Share this post


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

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

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

Do you know whats going on?

Share this post


Link to post
Share on other sites
[!--quoteo(post=372055:date=May 7 2006, 06:50 PM:name=wildteen88)--][div class=\'quotetop\']QUOTE(wildteen88 @ May 7 2006, 06:50 PM) [snapback]372055[/snapback][/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.

Share this post


Link to post
Share on other sites
It works for me - [code]Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3[/code]

Share this post


Link to post
Share on other sites
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?

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.