隐藏（）与fadeIn（）/ fadeOut（）

Question

我试图淡入并淡出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>

Answer 1

只需添加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(){
    });
});

Answer 2

为什么在可以使用CSS

时使用jQuery

.products{
  display:table;
  table-layout:fixed;
  width: 100%;
}
.option{
  display: table-cell;
  position: relative;
  text-align: center;
  padding: 24px;
  background: #C0FFEE;
}
.option button{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  cursor: pointer;
  background: #1CEA6E;
  transition: 0.3s; -webkit-transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
.option:hover button{
  opacity: 1;
  visibility: visible;
}

<div class="products">

  <div class="option">
    <h3>DSL 6</h3>
    <button>ORDER NOW!</button>
  </div>

  <div class="option">
    <h3>DSL 30</h3>
    <button>ORDER NOW!</button>
  </div>

  <div class="option">
    <h3>SUPER DSL 50</h3>
    <button>ORDER NOW!</button>
  </div>

</div>

Answer 3

$(document).ready(function(){
     $('#hidedsl6').hide();

      $('#showdsl6').hover(function(){
      $('#hidedsl6').fadeIn();});


});