#1
  1. Jesusy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    michigan
    Posts
    122
    Rep Power
    12

    Question 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/
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Try it like this...
    Code:
    <div class="top" onmouseover="this.className='top1'" onmouseout="this.className='top'">Here</div>
    Works for me!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    To see real CSS2 in action (moz, IE5+ Mac, others), try....
    Code:
    div.top:hover
    btw it's 'solid'
  6. #4
  7. Jesusy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    michigan
    Posts
    122
    Rep Power
    12
    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

IMN logo majestic logo threadwatch logo seochat tools logo