jQuery hover show div bascule

Je travaille sur ce site plutôt facile, mais cela fait longtemps que je ne sortingpote pas jQuery et je pense que je fais quelque chose de mal ici.

Ici, vous pouvez prévisualiser l’idée avec jsFiddle http://jsfiddle.net/rGb34/1/

Il y a quelques problèmes avec le jQuery.

Si vous survolez le bouton jaune, le contenu jaune commence à basculer.
Si vous survolez un bouton puis le désactivez, la div disparaît (en raison de la fonction de basculement), mais j’aimerais que la dernière div soit active même en l’absence de survol.

Est-ce que quelqu’un a un bon conseil pour que je puisse finir?

Tout d’abord: n’utilisez pas le même nom d’identifiant avec une autre balise. Dans votre exemple, il s’agissait de id = “slider”.

Voici jsFiddle pour jouer avec (j’ai édité votre HTML et CSS aussi)

Vous pouvez le faire de cette façon, beaucoup plus solide:

jQuery:

 jQuery(document).ready(function() { $('.greenC, .blueC, .orangeC').hide(); $('.nav li').hover(function() { var takeClass = $(this).attr('class'); // takes class hovered element. example: '.yellow' $('.slider').hide(); $('.'+ takeClass + 'C').show();// shows the element '.yellowC' }); });

Et votre HTML devrait être comme ça:

 ...
 ...
 ...
 ...
   Fiducairy services
 Licensing
 Payment processing
 E-zone colocation

$ (‘. vert, bleu, orange, jaune’). hide (); si vous cachez le jaune aussi, ça marche très bien pour moi. Est-ce ce que vous voulez?

Si vous voulez que la première div apparaisse correctement au chargement, vous devez être plus précis sur votre gestionnaire d’événements .yellow

 $('.y_active, .yellow').hover( function() { $('.yellow').show(); $('.green').hide(); $('.blue').hide(); $('.orange').hide(); }, function() { $('.yellow').hide(); });

DEMO