www.webdeveloper.com
Results 1 to 7 of 7

Thread: Styling Parent Hover/mouseover state

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    7

    Styling Parent Hover/mouseover state

    Hi,
    I am trying to style a parent element with a hover state style. I want to change the background colour when hovered over. I cant edit the html as this is generated automatically from a cms.


    HTML example
    <td>
    <a>
    <div id=timetablemenu>Timetable</div>
    </a>
    </td>

    Javascript
    var timetablemenuTag = document.getElementById('timetablemenu');
    timetablemenuTag.parentNode.parentNode.style.backgroundColor='#FF0000';

    This works fine but i need to add a rollover background colour change.
    I have tried timetablemenuTag.parentNode.parentNode.addClass="timetable2"; and adding CSS but this doesnt seem to work.

    Any ideas/suggestions would be much appriciated,

    Thanks,
    Tony

  2. #2
    Join Date
    Jul 2010
    Location
    Sofia, Bulgaria
    Posts
    49
    Code:
      p = timetablemenuTag.parentNode.parentNode;
      p.className = (p.className) ? p.className + ' timetable2' : 'timetable2';
      p.class = p.className;
    Last edited by MGenev; 08-26-2010 at 08:03 AM.

  3. #3
    Join Date
    Nov 2009
    Posts
    7

    parent style class

    Thanks for your quick reply. I still can't get this to work (see my source code below). Can you see what i am doing wrong?

    <html>
    <head></head><body>
    <table><tr>
    <td>
    <a>
    <div id=timetablemenu>Timetable</div>
    </a>
    </td>
    </tr>
    </table>

    <script type="javascript">
    var timetablemenuTag = document.getElementById('timetablemenu');
    p = timetablemenuTag.parentNode.parentNode;
    p.className = (p.className) ? p.className + ' timetable2' : 'timetable2';

    </script>


    <style>
    .timetable2 {
    background-color:green;
    }

    .timetable2:hover{
    background-color:green;
    }
    </style>
    </body>

    Thanks,
    Tony

  4. #4
    Join Date
    Jul 2010
    Location
    Sofia, Bulgaria
    Posts
    49
    I edited my example (by adding "p.class = p.className", for different browsers use different attribute names). Maybe you're using IE (which uses "class" attribute).

    The other possibe reason could be that both CSS styles (.timetable2 and .timetable2:hover) actually set the background color to "green" so no change would occure.

  5. #5
    Join Date
    Nov 2009
    Posts
    7
    Thanks for your posts.
    I have tried this but no luck. I dont get green at all lol. I've tried IE and Firefox.
    Manually entering the class into the html works and it displays green but the javascript does seem to be adding the class to the HTML.

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    have you tried just overwriting the CSS rules your CMS is applying by using !important ?

    example

    <style>
    .timetable2 {
    background-color:green !important;
    }

    .timetable2:hover{
    background-color:green !important;
    }
    </style>
    </body>

  7. #7
    Join Date
    Nov 2009
    Posts
    7
    ok it does work...me being stupid.

    The only reason it didnt work was because i used:
    <script type="javascript">
    instead of
    <script language="javascript">

    Thanks for your help, i really appricate it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles