Javascript 尝试在悬停或鼠标悬停时显示top hat下拉菜单

我尝试将

.toggle

更改为

.hover

和

.mouseover

，但运气不佳

(".th_slidingDiv").hide();
$(".th_show_hide").show();

$('.th_show_hide').toggle(function(){
    $(".th_slidingDiv").slideDown( 500, 'swing',
        function(){
            $("#plus").text("-")
            $(this).addClass("display_block");
        });
},function(){
    $(".th_slidingDiv").slideUp( 500, 'swing',
        function(){
            $("#plus").text("+")
            $(this).removeClass("display_block");
        });
});

//为每个模块设置columns类。
如果（ot_get_选项（'tophat_columns_count'）！=“”）：
$Mystry_header_columns=ot_get_选项（'tophat_columns_count'）；
其他：
$mystry\u header\u columns=“十六列”；
endif；
?> 
更好的答案是：

.th_slidingDiv
元素的CSS规则不应是内联的，而应在样式表中完成，否则无法使用CSS规则覆盖其行为，因为内联样式优先

您应该替换：


$（this）.addClass（“显示块”）$（this.show（））进行编码>

$（this）.removeClass（“display_block”）与
$（this.hide（）


然后，jQuery将用
display:block覆盖
上的内联样式或
显示：无视情况而定


原始答复：

.th_slidingDiv
元素的CSS规则不应是内联的，而应在样式表中完成，否则无法使用CSS规则覆盖其行为，因为内联样式优先

HTML应该如下所示：

<div class="th_slidingDiv">
    ...
</div>

.th_slidingDiv {
    display: none;
}

#section-tophat-dropdown:hover .th_slidingDiv {
    display: block;
}

你也可以发布htmlPosted html。
.th_slidingDiv {
    display: none;
}

#section-tophat-dropdown:hover .th_slidingDiv {
    display: block;
}