PDA

View Full Version : JQuery taking over CSS roll-over


tunkKid
06-11-2009, 04:43 PM
I have this lovely javascript using JQuery:
<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
06-11-2009, 07:39 PM
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:
$(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?????

Eldarrion
06-12-2009, 04:17 PM
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?