Spunky Posted August 13, 2011 Share Posted August 13, 2011 HTML Element: <span class="button" id="firstTitleButton" /></span> CSS Applied to it: .button:hover { background: url(images/arrowButtonHover.png) no-repeat !important;}.button:active { background: url(images/arrowButtonActive.png) no-repeat !important;} Jacascript: $("span#firstTitleButton").click(function(){ document.getElementById("firstTitleButton").style.backgroundImage = "url(images/arrowButtonActive.png)"; $("p#mandelbrotPanel").slideToggle("slow", function(){ if($("p#mandelbrotPanel").is(":hidden")){ document.getElementById("firstTitleButton").style.backgroundImage = "url(images/arrowButton.png)"; }; }); }); What this is doing is when you hover over the span, it changes the background image to one thing, when you click it it changes to another. Then javascript says now that this element has .slideToggle, the background image will have the 'active' look but when it is :hidden it will go back to normal. Problem with just doing that is, even after I close the 'panel' by clicking on it again is the :hover effect stops working.That's when I did some research and someone told someone to try !important so I did. Indeed it works, however, unfortunately it also works when the panel is open and I do not want there to be a :hover effect. This also causes the :active effect to work but I suppose that wont make any difference as long as the :hover doesn't work.Basically what I need to know is how to make the :hover and :active still work once I close the panels but not while they are open. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.