Question

当我移动另一个元素时，我想更改CSS display属性。我尝试使用jQuery完成此操作，如：

$( "li.megamenu-li-first-level" ).hover(function() {
  $(".mega").css("display", "show");

});

但是html中<div class="mega" style="display: none;">定义的元素仍未显示，为什么不显示？

Answer 1

value属性display没有有效的show。您可能希望撰写此$(".mega").css("display", "block");，但这可以简单地写为$(".mega").show()

尝试，

$( "li.megamenu-li-first-level" ).hover(function() {
  $(".mega").show();
});

用于在鼠标悬停时显示和隐藏元素。

  $( "li.megamenu-li-first-level" ).hover(function() {
      $(".mega").show();
    },function(){
      $(".mega").hide();
  });

Answer 2

可以试试这个：

$( "li.megamenu-li-first-level" ).hover(function() {
  $(".mega").css("display", "block");

});

希望它有所帮助。

Answer 3

试试这个，在鼠标悬停和鼠标离开时会很有用。



$('.li.megamenu-li-first-level').mouseover(function(){
if ($('.mega').css('display') == 'none') {
    $('.mega').css("display","block");
}


});

$('.li.megamenu-li-first-level').mouseleave(function(){
    if ($('.mega').css('display') == 'block') {
        $('.mega').css("display","none");enter code here
    }
});

$('.li.megamenu-li-first-level').mouseover(function(){ if ($('.mega').css('display') == 'none') { $('.mega').css("display","block"); }

Answer 4

这对我来说效果最好：

$( "li.megamenu-li-first-level" ).mouseover(function() {
  $(".mega").show();
});
$( "li.megamenu-li-first-level" ).mouseleave(function() {
  $(".mega").hide();
});

谢谢大家的帮助，我能够使用每个人的点点滴滴！

在悬停时更改显示属性

4 个答案: