J'ai un div qui lorsque vous survolez, un autre div apparaît. Ils ne sont pas parent / enfant ou enveloppés, j'ai donc utilisé un script pour que cela fonctionne le plus facilement possible et pour avoir ce dont j'avais besoin. Avec .mouseover, le hover div apparaît lentement, ce que je veux.

Mon problème est de faire en sorte que .mouseout fasse disparaître lentement la division de survol et qu'elle disparaisse. J'ai essayé différentes variantes, mais le plus proche est de faire disparaître lentement la div, mais elle réapparaît après le délai que j'avais défini.

Je suis très nouveau dans js, vraiment aucune expérience du tout. J'ai écrit la première partie de ce code qui fonctionne mais le .mouseout est ce avec quoi j'ai des problèmes.

Voici mon code:

$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });

$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });

Je sais que c'est probablement simple, mais je ne sais pas grand chose sur js.

Voici le html:

<div id="show_stats1" class="stats">
    main, visible div
</div>


<div class="stat-1_info" style="visibility:hidden;">
    hidden div to be shown on hover
</div>

Voici un jsfiddle https://jsfiddle.net/yt3h9xnf/

1
Desirae S 19 avril 2020 à 06:45

2 réponses

Meilleure réponse

Vous pouvez utiliser la méthode .animate() avec opacity ou visibility. Il n'y a aucune raison d'utiliser les deux.

Si vous ne savez pas lequel utiliser, lisez cette réponse ici.

$("#show_stats1 h1").mouseover(function() { 
  $(".stat-1_info").animate({opacity: 1}, 200);
});

$("#show_stats1 h1").mouseout(function() { 
  $(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="show_stats1" class="stats">
    <h1>main, visible div</h1>
</div>

<div class="stat-1_info">
    hidden div to be shown on hover
</div>
0
Ivan86 19 avril 2020 à 04:20
  1. Simplifiez les choses en utilisant fadeIn() et fadeOut() avec sec comme paramètre. Cela prendra soin de l'heure à laquelle vous souhaitez voir le texte et que vous souhaitez disparaître.

  2. Utilisez display:none;, qui est le dernier et le meilleur du marché actuellement que d'utiliser la propriété visibility

fadeIn ()

disparaître()

$(document).ready(function() {
  $("#show_stats1 h1").mouseover(function() {
    $(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
  });

  $("#show_stats1 h1").mouseout(function() {
    $(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
  });
});
.stats_container {
  width: 310px;
  padding: 10px;
  margin-bottom: 0px;
}

.stats {
  width: 300px;
  height: 34px;
  margin: 15px 0px -3px 0px;
}

.stats h1 {
  text-align: left;
}

.stats h2 {
  position: absolute;
  left: 260px;
  margin-top: 8px;
  width: 50px;
  text-align: right;
}

.stats h1 {
  display: inline-block;
  font-weight: 400;
  color: #000;
  line-height: 9.5pt;
  font-size: 9.5pt;
}

.stat-1_info {
  top: -50px;
  margin: 0px;
}

.stat-1_info {
  float: right;
  position: relative;
  left: 0px;
  display: inline-block;
  width: 380px;
  height: 334px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
  <div id="show_stats1" class="stats">
    <h1>Strength:</h1>
  </div>
</div>


<div class="stat-1_info" style="display:none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
  ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>
0
Manjuboyz 19 avril 2020 à 04:36