Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-11-2009, 04:43 PM   PM User | #1
tunkKid
New Coder

 
Join Date: May 2009
Posts: 18
Thanks: 3
Thanked 0 Times in 0 Posts
tunkKid is an unknown quantity at this point
JQuery taking over CSS roll-over

I have this lovely javascript using JQuery:
Code:
    <script type="text/javascript">
$(document).ready(function(){
	$("#selection a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-10", left: "-200"}, "slow");
		$("div#middleContainer .members input").animate({ opacity: "1"}, "normal");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-100"}, "slow");
		$("div#middleContainer .members input").animate({ opacity: ".7"}, "normal");
	});
});
</script>
Which reveals a nice message and turns on the images in div#middleContainer .members input to full opacity, but after a user rolls over #selection a, my CSS rollover to turn the opacity to 100% stops working?

I could just write more javascript so when you rollover div#middleContainer .members input, the opacity is 100% but thought there could be a simpler solution??
tunkKid is offline   Reply With Quote
Old 06-11-2009, 07:39 PM   PM User | #2
tunkKid
New Coder

 
Join Date: May 2009
Posts: 18
Thanks: 3
Thanked 0 Times in 0 Posts
tunkKid is an unknown quantity at this point
Ok, so i wrote some more javascript in order to get the roll-over working but its not responding?? I have looked at it for a while and can't figure out why:
Code:
$(document).ready(function(){
	$("#selection a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-10", left: "-200"}, "slow");
		$("div#middleContainer .members input").animate({ opacity: "1"}, "normal");
		return false;
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-100"}, "slow");
		$("div#middleContainer .members input").animate({ opacity: ".5"}, "normal");
		return false;
	});
	
	$("div#middleContainer .members input").hover(function() {
		$(this).("div#middleContainer .members input").animate({ opacity: "1"}, "normal");
		return false;
	}, function() {
		$(this).("div#middleContainer .members input").animate({ opacity: ".5"}, "normal");
		return false;
	});
});
</script>
The first function works like gang busters, and i assumed copying it and replacing "#selection a" with "div#middleContainer .members input" would do the trick but no cigar?????
tunkKid is offline   Reply With Quote
Old 06-12-2009, 04:17 PM   PM User | #3
Eldarrion
Regular Coder

 
Join Date: Feb 2009
Location: Wheeling, IL
Posts: 358
Thanks: 5
Thanked 62 Times in 60 Posts
Eldarrion is on a distinguished road
Would be useful to see the HTML mark-up. There's no way to tell what your selectors are affecting without seeing your structure. Do you really have images inside your inputs?
__________________
The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

How to ask smart questions?
Eldarrion is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:15 PM.


Advertisement
Log in to turn off these ads.