jQuery 悬停功能，无法按预期使用段落标签

Question

我在 hover div 中有 paragraph 标签，每次鼠标进入一个新段落时，动画都会重复。
有什么问题吗？

JS

$(document).ready(function() {
    $("#container1a").mouseover(function() {
         $('#col1start').stop(true, true).fadeOut(800);
         $('#col1start').hide();
         $('#col1hover').stop(true, true).fadeIn(800);
      });
      $("#container1a").mouseout(function() {
         $('#col1hover').stop(true, true).fadeOut(800);
         $('#col1hover').hide();
         $('#col1start').stop(true, true).fadeIn(800);
      });
});

HTML

<div id="container1a">
    <div id="col1start">
        <p>text1</p>
        <p>text2</p>
        <p>text3></p>
    </div>
</div>

Answer 1

您可以拥有同时处理这两个事件的函数，此代码将为您提供一个良好的开端。

$(document).ready(function() {
    $('#container1a').hover(function() {

        $('#col1start').stop(true, true).fadeOut(800);
        $('#col1start').hide();
        $('#col1hover').stop(true, true).fadeIn(800);

    }, function() {

        $('#col1hover').stop(true, true).fadeOut(800);
        $('#col1hover').hide();
        $('#col1start').stop(true, true).fadeIn(800);
    }); 
});