changing css class onmouseover w/ <div>

Dev Shed Forums Sponsor:

October 24th, 2003, 12:15 AM

mikeylove

doesn't like the cereal.

Join Date: Aug 2003

Location: michigan

Posts: 121

Time spent in forums: 6 m 31 sec
Reputation Power: 6

changing css class onmouseover w/ <div>

hi!

what i'm tryign to do is make the border / background color of my <div> selection change on mouseover, here is my current code:

Code:

<style type="text/css">
BODY{   font-family: verdana, arial, helvetica, sans-serif;
        font-size: 10pt;
        font-weight: bold;
        background-color:#CECECE;
        color:#000000;;
        margin-top: 0pt;
        margin-bottom: 0pt;
        margin-right: 0pt;
        margin-left: 0pt;}

.top{   font-family: verdana, arial, helvetica, sans-serif;
        font-size: 20pt;
        font-weight: bold;
        background:#EEEEEE;
        border: 1px dashed #000000;
        height: 5%;
        width: 100%;}

.top2{   font-family: verdana, arial, helvetica, sans-serif;
        font-size: 20pt;
        font-weight: bold;
        background:#FFFFFF;
        border: 1px solidd #000000;
        height: 5%;
        width: 100%;}
</style>

and:

Code:

<div class="top">
        ./mikey
</div>

what i want to happen is onmouseover of the <div> select, the class changes from the "top" class to "top2"

so far, i have tried the following:

renaming the top2 class to top:hover

using:

Code:

<div onmouseover="this.class.name='top2'" onmouseout="this.class.name='top'">

i really don't want to have to have to specify style elements in the <div> selection, i want all presentation elements to be drawn from css.

thank you for your time

love,
mikey

__________________
Hey, i can edit my signature again.

Hello.

visit http://connectyourweb.com/

October 24th, 2003, 02:48 AM

ChiefWigs1982

Cunning Linguist

Dev Shed God 10th Plane (9500 - 9999 posts)

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 9,920

Folding Points: 50746 Folding Title: Beginner Folder

Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873

Try it like this...

Code:

<div class="top" onmouseover="this.className='top1'" onmouseout="this.className='top'">Here</div>

Works for me!

__________________

Support requests via PM will be ignored!
Sites: Route of Queue | Sinthetic - Alternative UK Hiphop
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

Sign up with Matched.co.uk and earn up to £15 per website every month!

October 24th, 2003, 04:10 AM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 8

To see real CSS2 in action (moz, IE5+ Mac, others), try....

Code:

div.top:hover

btw it's 'solid'

October 24th, 2003, 01:46 PM

mikeylove

doesn't like the cereal.

Join Date: Aug 2003

Location: michigan

Posts: 121

Time spent in forums: 6 m 31 sec
Reputation Power: 6

yep, i finally got it to work, i had made a mistake in my coding and typed out this.class.name instead of this.className .

thanks for your help everybody

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: