Jump to content

Javascript Changing CSS


Spunky

Recommended Posts

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...