2010-06-07 5 views
0

Je me sens comme cela devrait fonctionner:contenu Permutation dans un div séparé sur vol stationnaire

$(".module .one").hover(function() { 
    $("#one").addClass('red'); 
    }); 

En fait, je me cache tous les .children de « #viewport de la charge (qui est #one), puis lorsqu'un séparé élément est survolé, (dans ce cas .module .one) Je veux changer quelque chose dans #viewport, en particulier #one

L'idée de base est une fenêtre de contenu variable, où quand une vignette ou quoi que ce soit que je mets dans les modules d'échange le contenu affiché dans la fenêtre Quelque chose que je fais mal

Il re est mon plein JS:

<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() { 
    $("#one").addClass('red'); 
    }); 
}); 
</script> 

Voici le balisage:

<div id="viewport"> 
    <div id="one">FIRST ONE CONTENT</div><!-- end #one --> 
    <div id="two">SECOND ONE CONTENT</div><!-- end #two --> 
    <div id="three">THIRD ONE CONTENT</div><!-- end #three --> 
    <div id="four">FOURTH ONE CONTENT</div><!-- end #four --> 
</div><!-- end #viewport --> 

    <div class="module span-1 one"> 
    <div class="inside">HOVER</div><!-- end .inside --> 
    <h1>TITLE</h1> 
    <div class="caption down"> 
     <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p> 
    </div><!-- end .caption --> 
</div><!-- end .module --> 

    <div class="module span-1 two"> 
    <div class="inside">HOVER</div><!-- end .inside --> 
    <h1>TITLE</h1> 
    <div class="caption down"> 
     <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p> 
    </div><!-- end .caption --> 
</div><!-- end .module --> 

La fonction de vol stationnaire plus au milieu est pour certains effets de survol de fantaisie que les modules eux-mêmes effectuer, mais à ces fins, je Je veux juste comprendre pourquoi je ne peux pas ajouter une classe à un élément séparé quand un autre est plané. J'adorerais de l'aide/des conseils!

+0

S'il vous plaît voir mon edit. – griegs

Répondre

0

Voulez-vous dire:

$(".module.one").hover(function() { 

Si les classes sont à la fois sur le même élément dom, il devrait y avoir aucun espace entre eux. Un espace entre les classes impliquerait que le premier est le parent et le second est son enfant.

0

$("#viewport #one").addClass('red'); fait référence à un contrôle avec deux noms? Est-ce que cela devrait être?

$(".viewport .one").addClass('red');?

modifier

J'ai juste essayé cela et cela a fonctionné;

$ (". Viewport.one"). AddClass ('red');

Vous devez supprimer l'espace entre les deux classes.

+0

Ah mon erreur. J'essayais de spécifier l'enfant de #viewport nommé #one, mais je devrais juste faire ben: $ (". Module .one"). Hover (function() {$ ("# un"). AddClass (' rouge'); }); Pourtant, cela ne semble pas fonctionner? –

+0

try $ (". Module.one") J'ai trouvé cela fonctionne dans certains cas. Je pense que l'élément a deux classes. Faites-moi savoir si cela ne fonctionne pas. – griegs