Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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??

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?????

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •