SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS a:hover doesn't work after JavaScript backgroundPosition

    Hi

    I have a menu done in CSS. When you mouse over the menu i change the background position in order to display the 'hover' state. I'm using javascript to show/hide <div> when you click on a button to display proper content without reloading the page (Like a tab menu).

    To display the menu in a 'hover' state when you have clicked, i use also javascript to move the background position so it stays on the hover state. But when i mouse over my other menu, they do not apply the CSS anymore.

    Here is the JS i use on a 'onclick':

    Code:
    function menu()
    {
    document.getElementById('menu2').style.backgroundPosition = 'center 0';
    document.getElementById('menu1').style.backgroundPosition = 'center -48px';
    }
    I guess it have something to do with the fact that i alter the CSS with the JS. But anyone know how to fix this without having to create my mouseover with JS and keep it in CSS?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry.... i might of misread..but

    Why cant you use a css hover pseudo class to move the position?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm using CSS to move the position. But when you click on a button, i want the button to stay in the hover state. So i do it with the JS (the script i have provide) and it does what i intended. But if i mouseover an other menu that is not selected, the position of the background doesn't change anymore. Like if the CSS a:hover wasn't working anymore after clicking on a button....

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, instead of using the attribute 'backgroundPosition' in the JS, i use 'className' to switch the CSS class name and it's working well.


Bookmarks

Posting Permissions

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