Je veux que les informations div apparaissent lorsque je passe la souris sur la div image correspondante. Le div d'information n'est pas un enfant ou un parent et n'est pas connecté au div d'image. De plus, je veux que les informations du deuxième div soient chargées si je quitte la souris du premier div et passe le curseur sur le second.
Voici mon code HTML
jQuery(document).ready(function () {
jQuery(".leaders.firstImg").mouseover(
function () {
jQuery('#bryanInfo').css("display", "block");
});
jQuery(".leaders.secondImg").mouseover(
function () {
jQuery('#fernInfo').css("display", "block");
});
});
Et voici mon code jQuery
<div class="row">
<div class="col-xs-6">
<img class="meetTheTeamImg leaders firstImg" alt="" src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg"/>
</div>
<div class="col-xs-6">
<img class="meetTheTeamImg leaders secondImg" alt="" src="https://www.holmescustom.com/media/wysiwyg/Fern.jpg"/>
</div>
<div class="col-xs-6" id="bryanInfo">
<p>Bryan received a Marketing degree from the University of North Florida and joined the family Company in 1998 starting in</p>
</div>
<div class="col-xs-6" id="fernInfo">
<p>Steve received his Bachelor of Science in Computer Engineering from the University of Florida and Masters of Business Administration.</p>
</div>
</div>
Et un lien vers mon violon http://jsfiddle.net/yash009/Lg2eh7vu/13/
3 Réponses :
Au lieu d'appliquer des styles en ligne , ayez une classe qui garde l'élément caché et basculez les classes en entrée et en sortie.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-6">
<img class="meetTheTeamImg leaders firstImg" alt="" src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg" />
</div>
<div class="col-xs-6">
<img class="meetTheTeamImg leaders secondImage" alt="" src="https://www.holmescustom.com/media/wysiwyg/Fern.jpg" />
</div>
<div class="col-xs-6 hide" id="bryanInfo">
<p>Bryan received a Marketing degree from the University of North Florida and joined the family Company in 1998 starting in</p>
</div>
<div class="col-xs-6 hide" id="fernInfo">
<p>Steve received his Bachelor of Science in Computer Engineering from the University of Florida and Masters of Business Administration.</p>
</div>
</div>
.hide {
display: none;
}
jQuery(".leaders.firstImg").mouseenter(
function() {
jQuery('#bryanInfo').removeClass('hide');
}).mouseleave(function() {
jQuery('#bryanInfo').addClass('hide');
});
jQuery(".leaders.secondImage").mouseenter(
function() {
jQuery('#fernInfo').removeClass('hide');
}).mouseleave(function() {
jQuery('#fernInfo').addClass('hide');
});
Premièrement, méfiez-vous de la non-concordance de nom! Dans votre script HTML, vous utilisez le nom de classe secondImage , alors que vous y faites référence en tant que secondImg dans votre JQuery.
N'oubliez pas non plus de masquer le descriptions initialement, lors du premier chargement de la page, c'est à dire dans votre gestionnaire jQuery (document) .ready :
jQuery('#bryanInfo').css("display", "none");
jQuery('#fernInfo').css("display", "none");
Merci pour votre commentaire J'ai apporté les modifications requises à la question.
Vous n'avez pas besoin de jquery pour faire cela, mais si vous devez le faire, voici un exemple:
Puisque vous voulez seulement que les informations soient affichées au survol, je définirais les informations display: none code> par défaut. De cette façon, lorsque vous connectez vos méthodes mouseover / mouseout , vous pouvez simplement utiliser .hide et .show au lieu d'essayer de mettre à jour les classes. J'ai fait en sorte que vos images aient une hauteur de 50px, mais cela peut être supprimé. Je l'ai seulement ajouté pour le test.
Vous n'avez pas non plus à utiliser le mappage d'identifiant comme je l'ai ci-dessous, je suggérerais de le rendre un peu plus évolutif en utilisant peut-être un attribut de données pour contenir une sorte d'identifiant que vous saisiriez de l'élément en survol. Une fois que vous avez cet identifiant, vous pouvez l'utiliser pour trouver le bon div d'information. Ou mieux encore, structurez votre html différemment pour avoir un conteneur div avec une image et un élément d'information à l'intérieur. Ensuite, vous pouvez utiliser $ .closest pour saisir la div d’informations la plus proche de votre image (qui sera la bonne), puis la masquer / afficher.
Voici une version simplifiée manière de la structurer (sans utiliser jQuery):
https: / /jsfiddle.net/mswilson4040/gnh2wpvu/10/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-6" id="bryan">
<img class="meetTheTeamImg leaders firstImg" alt="" src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg"/>
</div>
<div class="col-xs-6" id="fern">
<img class="meetTheTeamImg leaders secondImage" alt="" src="https://www.holmescustom.com/media/wysiwyg/Fern.jpg"/>
</div>
<div class="col-xs-6" id="bryanInfo">
<p>Bryan received a Marketing degree from the University of North Florida and joined the family Company in 1998 starting in</p>
</div>
<div class="col-xs-6" id="fernInfo">
<p>Steve received his Bachelor of Science in Computer Engineering from the University of Florida and Masters of Business Administration.</p>
</div>
</div>
img {
height: 50px;
}
#fernInfo, #bryanInfo {
display: none;
}
jQuery(document).ready(function () {
$('#bryan').mouseover( (e) => $('#bryanInfo').show())
$('#bryan').mouseout( (e) => $('#bryanInfo').hide())
$('#fern').mouseover( (e) => $('#fernInfo').show())
$('#fern').mouseout( (e) => $('#fernInfo').hide())
});
Merci, cela a vraiment fonctionné. Je recherche une solution plus évolutive, ce sera formidable si vous élaborez ou si vous pouvez me diriger vers une ressource. Cependant, cette solution fonctionne pour le moment.
Si vous posez une autre question, je serai heureux de vous fournir une réponse