[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

08/05/2009 at 11:21PM PDT, ID: 24630483 | Points: 500
[x]
Attachment Details

Usiing Jquery to replace :hover pseudo class

Asked by bradderick in Jquery, Cascading Style Sheets (CSS), Miscellaneous Web Development

Tags: Jquery, CSS, XHMTL

Hi,

Is it possible to use Jquery to intercept a css :hover state and replace the 'snap rollover' with a fading function? Because there are a few different types of rollovers (ie. solid color, images, and lilnk based) in the CSS, it would be optimal if there was a way for the JS to understand the pseudo-class :hover and apply the fading function to it (from what I understand, it may be impossible for Jquery to use this as a selector). At the moment, I've got a function applied to one of the elements, but thats using an animated color and is hard coded. I'd rather not have to code a different function for each element on the page. Hope I'm not asking too much - any help would be appreciated.

Thanks.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
<script type="text/javascript">
$(document).ready(function(){	   
	$("#rollover1").animate({backgroundColor: "red"}, 300 ); 
    $("#rollover1").hover(function(){
	$(this).stop().animate({backgroundColor: "#000000"}, 500 );
	},function(){
	$("#rollover1").stop().animate({backgroundColor: "red"}, 300 );
	});
 
});
</script>
<style type="text/css">
#rollover1, #rollover2 a, #rollover3 {display:block;height:60px;width:200px;}
#rollover1 {background-color:red;}
#rollover2 a {background-color:orange;}
#rollover3 {background-color:url(image.gif) no-repeat;}
#rollover1:hover {background-color:#000;}
#rollover2 a:hover {background-color:#999;}
#rollover3:hover {background-color:url(image.gif) no-repeat 0 -60px;}
 
</style>
</head>
 
<body class="e">
<div id="rollover1"></div>
<div id="rollover2"><a href="#">Testing</a></div>
<div id="rollover3"></div>
</body>
</html>
 
Loading Advertisement...
 
[+][-]08/06/09 02:27 AM, ID: 25031399

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08/06/09 04:07 AM, ID: 25031939

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]08/12/09 05:40 AM, ID: 25078055

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20090824-EE-VQP-74 - Hierarchy / EE_QW_3_20080625