HTML
<div class="onediv"><a href="">text</a></div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>
CSS
.nextdiv{display: none;}
JQUERY
$( ".onediv a" ).hover(function() {
$(".nextdiv").css({"display" : "block"});
});
$( ".onediv a" ).mouseleave(function() {
$(".nextdiv").css({"display":"none"});
});
Lorsque je passe le curseur sur le texte, .nextdiv s'affiche. Maintenant, je veux appliquer la transition lorsque ce .nextdiv s'affichera. Merci d'avance.
Réponses:
2 pour la réponse № 1$(".onediv").hover(function() {
$(this).next(".nextdiv").toggle("slow")
});
.nextdiv {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>
<div class="onediv"><a href="">text1</a>
</div>
<div class="nextdiv">
<p>text1 text1 text1 text1 text1 text1 text1 text1.
</p>
</div>
<div class="onediv"><a href="">text2</a>
</div>
<div class="nextdiv">
<p>text2 text2 text2 text2 text2 text2 text2 text2.
</p>
</div>
Description: affichez ou masquez les éléments correspondants.
- Vous pouvez utiliser .basculer()
- Déplacez le survol pour div pas un
1 pour la réponse № 2
À la place d'utiliser display:none
, vous pouvez utiliser d'autres techniques pour masquer l'élément comme appliquer un négatif z-index
pour que la transition prenne effet lors de l'affichage:
$(".onediv a").hover(function() {
$(".nextdiv").addClass("show");
}, function() {
$(".nextdiv").removeClass("show");
});
.nextdiv {
position: absolute;
z-index: -999;
opacity: 0;
transition: all 1s;
}
.show {
position: static;
z-index: 0;
opacity: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>