Wie benutze ich css Transition beim Anzeigen des Blocks, wenn man den Mauszeiger über einen anderen Block bewegt?

Question

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'}); 
}); 

Als ich dann in Text schweben .nextdiv angezeigt wird. Jetzt möchte ich den Übergang anwenden, wenn .nextdiv angezeigt wird. danke im Voraus.

Answer 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>

Beschreibung: Anzeige oder die abgestimmte Elemente auszublenden.

1. können Sie verwenden .toggle()
die Hover-Bewegen
2. keine

Answer 2

Statt div display:none zu verwenden, können Sie andere Techniken verwenden, um das Element zu verstecken wie ein negatives z-index so anwenden, dass die Der Übergang wird wirksam, wenn er angezeigt wird:

$(".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>