Question

我想隐藏div＆＃39;示例＆＃39;在悬停事件中，需要显示div＆＃39;样本＆＃39;在mouseout上

＆＃13;

$('.secmenu').hover(function() {

  $('.sample').css('opacity', '0');
  if ($('.secmenu').mouseleave()) {
    $('.sample').css('opacity', '1');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" class="secmenu">click</a>
<div class="sample">
  hello div sample text content hello div sample text content
</div>

＆＃13;

Answer 1

＆＃13;

$('.secmenu').mouseenter(function() {//hide div on mouse enter
    $('.sample').hide();
}).mouseleave(function() {//show div on mouse leave
    $('.sample').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" class="secmenu">click</a>
<div class="sample">
  hello div sample text content hello div sample text content
</div>

＆＃13;

Answer 2

这可以在css中完成。不需要jQuery：

.secmenu:hover + .sample {
  display: none;
}

<a href="" class="secmenu">click</a>
<div class="sample">
  hello div sample text content hello div sample text content
</div>

Answer 3

在ExpressionType.Lambda.上隐藏div并在hover事件中显示div。您需要绑定mouseleave事件，而不是将其写入mouseleave条件。

if

Answer 4

试试这个：

＆＃13;

$('.secmenu').on('mouseenter',function() {
  $('.sample').css('opacity', '0');
}).on('mouseleave',function(){
    $('.sample').css('opacity', '1');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="" class="secmenu">click</a>
<div class="sample">
  hello div sample text content hello div sample text content
</div>

＆＃13;

Answer 5

如果.sample立即成为.secmneu的下一个兄弟，那么您不需要JavaScript或jQuery。你可以用纯CSS做到这一点。

＆＃13;

.sample {
  transition: opacity 0.25s ease;
  opacity: 0;
}
.secmenu:hover + .sample {
  opacity: 1;
}

＆＃13;

<a href="" class="secmenu">click</a>
<div class="sample">
  hello div sample text content hello div sample text content
</div>

＆＃13;

Answer 6

根据jQuery's documentation：

将一个或两个处理程序绑定到匹配的元素，当鼠标指针进入并离开元素时执行。

.hover（handlerIn，handlerOut）

所以你可以这样做（try it out）：

$( '.secmenu' ).hover(
  function() {
    $('.sample').hide();
  },
  function() {
    $('.sample').show();
  }
);

相当于：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

在悬停事件中隐藏div

6 个答案: