Javascript 使用fadeIn（）/fadeOut（）隐藏（）

我正在尝试进行淡入淡出jquery。然而，我有一些问题

当页面加载时，我隐藏div，但当我将鼠标悬停在上面使其淡入时，它会淡入一秒钟，然后消失。然后我必须在外面盘旋，然后再在里面盘旋

我的Jquery：

$(document).ready(function(){
$('#hidedsl6').hide();
    $('#showdsl6').hover(function(){
        $('#hidedsl6').fadeIn();
        }, function(){
        $('#hidedsl6').fadeOut();
    });
    $('#showfttn10').hover(function(){
    });
    $('#showfttn15').hover(function(){
    });
    $('#showfttn25').hover(function(){
    });
    $('#showfttn50').hover(function(){
    });
});

我的HTML：

<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button>

dsl6
现在点菜！

只需添加preventDefault即可停止来回淡入

$(document).ready(function(){
$('#hidedsl6').hide();
    $('#showdsl6').hover(function(){
        $('#hidedsl6').fadeIn();
        }, function(e){
        e.preventDefault();
        $('#hidedsl6').fadeOut();
    });
    $('#showfttn10').hover(function(){
    });
    $('#showfttn15').hover(function(){
    });
    $('#showfttn25').hover(function(){
    });
    $('#showfttn50').hover(function(){
    });
});

---

为什么要使用jQuery，而它可以通过CSS来完成

.products{
显示：表格；
表布局：固定；
宽度：100%；
}
.选择权{
显示：表格单元格；
位置：相对位置；
文本对齐：居中；
填充：24px；
背景：#C0FFEE；
}
.选项按钮{
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
边界：0；
光标：指针；
背景：#1CEA6E；
转换：0.3s；-webkit转换：0.3s；
不透明度：0；
可见性：隐藏；
}
.选项：悬停按钮{
不透明度：1；
能见度：可见；
}

DSL 6
现在点菜！
DSL 30
现在点菜！
超级DSL 50
现在点菜！

你到底想要什么？@Mihai解决了这个问题，请你回答我好吗。谢谢大家的帮助！我不知道重复的ID会引起问题。

$(document).ready(function(){
$('#hidedsl6').hide();
    $('#showdsl6').hover(function(){
        $('#hidedsl6').fadeIn();
        }, function(e){
        e.preventDefault();
        $('#hidedsl6').fadeOut();
    });
    $('#showfttn10').hover(function(){
    });
    $('#showfttn15').hover(function(){
    });
    $('#showfttn25').hover(function(){
    });
    $('#showfttn50').hover(function(){
    });
});