After receiving a list of images, I noticed that Lorem Ipsum text appears every time the mouse hovers over the li elements. However, if you quickly move the mouse from one list element to another, the slideToggle function continuously activates and deactivates as many times as you hover over the elements.
In addition, when the cursor moves over the p element, which displays the text, it continues to move because it is not recognized as being over the li element, only the p. Any ideas on how to prevent this?
Thank you <3
$('#tabela_trabalhos ul li').mouseover(function () {
$(this).find('p').slideToggle(200)
})
$('#tabela_trabalhos ul li').mouseleave(function () {
$(this).find('p').fadeOut(400)
})#tabela_trabalhos {
margin-top: 32px;
position: absolute;
right: 10px;
left: 10px;
}
#tabela_trabalhos ul {
list-style: none;
display: flex;
}
#tabela_trabalhos ul li {
width:100%;
height:100px;
background: #aaa;
transition:1s;
}
#tabela_trabalhos ul li:hover {
background:#888;
transition:0.2s;
cursor:pointer;
}
#tabela_trabalhos ul li p {
display:none;
color:white;
margin:25px 0 0 25px;
font-size:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabela_trabalhos">
<ul>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
</ul>
<ul>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
<li><p>Lorem Ipsum Dolor Sit Amet</p></li>
</ul>
</div>