SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Aug 28, 2007, 08:40 #1
- 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'; }
-
Aug 28, 2007, 08:41 #2
- 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)
-
Aug 28, 2007, 08:48 #3
- 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....
-
Aug 28, 2007, 09:27 #4
- 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