Swapping content in a seperate div on hover
- by Fuego DeBassi
I feel like this should work:
$(".module .one").hover(function() {
$("#viewport #one").addClass('red');
});
Basically I am hiding all the .children of "#viewport on load, then when a seperate element is hovered, in this case .module .one I want to change something on the corresponding viewport ID #viewport #one.
Basic idea is a variable content window, where when a thumbnail or whatever I put in the modules swaps the content shown in the viewport. Something I am doing wrong?
Here is my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".module .caption").hide();
$("#viewport").children().hide();
$(".module").hover(function() {
$(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
},function() {
$(this).find(".caption").slideUp().end().siblings('.module').removeClass('under');
});
$(".module .one").hover(function() {
$("#viewport #one").addClass('red');
});
});
</script>
The bigger hover function in the middle is for some fancy rollover effects that the modules will perform themselves, but for these purposes I just want to figure out why I can't add a Class to a separate element when another is hovered. Would love some help/advice!
