jquery 如何切换鼠标输入或悬停？

Question

我正在尝试让 jQuery 切换在悬停或鼠标输入时起作用，但不太了解如何让它起作用。目前，我已将其设置为在点击时切换，效果很好。理想情况下，我希望在移动设备上点击它，但对于桌面设备，我更喜欢悬停效果。

https://jsfiddle.net/d8k3cn6a/

这是我的标记

  $('#step1').click(function () {
      $('#step1 .design-steps, #step1 .hidden-steps').fadeToggle();
    });
    
     $('#step2').click(function () {
      $('#step2 .design-steps, #step2 .hidden-steps').fadeToggle();
    });
    
    $('.design-box').mouseenter(function(){
    $('.design-steps').hide;
    $('.hidden-steps').show;   
    
      $('.design-box').mouseleave(function(){
    $('.design-steps').show;
    $('.hidden-steps').hide;   

});

.design-box {
  width: 220px;
  height: 220px;
  margin: 20px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.design-box:hover {
  border-radius: 0;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.design-steps {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hidden-steps {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hidden-steps p {
  font-size: 80%;
  width: 200px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

.design-box h1 {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 120%;
}

.numbers {
  font-weight: 300;
  text-align: center;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="design-box" id="step1">
              <div class="design-steps">
                <span class="numbers">1</span>
                <h1>heading</h1>
              </div>
              <div class="hidden-steps">
                <p>Testing testing testing step 1</p>
              </div>
            </div>
            
            <div class="design-box" id="step2">
              <div class="design-steps">
                <span class="numbers">2</span>
                <h1>heading</h1>
              </div>
              <div class="hidden-steps">
                <p>Testing testing testing step 2</p>
              </div>
            </div>

Answer 1

实际上，我看不出有任何理由使用 jQuery 来执行此操作，因为您说过您正在寻找一个 hover 解决方案(而不是单击)。

纯 css 总是更好:

.design-box {
  width: 220px;
  height: 220px;
  margin: 20px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.design-box:hover {
  border-radius: 0;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.design-steps {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.hidden-steps {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.hidden-steps p {
  font-size: 80%;
  width: 200px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

.design-box h1 {
  font-weight: 100;
  text-transform: uppercase;
  font-size: 120%;
}

.numbers {
  font-weight: 300;
  text-align: center;
  display: block;
}

.design-box:hover .design-steps {
  opacity: 0;
}
.design-box:hover .hidden-steps {
  opacity: 1;
}

<div class="design-box" id="step1">
  <div class="design-steps">
    <span class="numbers">1</span>
    <h1>heading</h1>
  </div>
  <div class="hidden-steps">
    <p>Testing testing testing step 1</p>
  </div>
</div>

<div class="design-box" id="step2">
  <div class="design-steps">
    <span class="numbers">2</span>
    <h1>heading</h1>
  </div>
  <div class="hidden-steps">
    <p>Testing testing testing step 2</p>
  </div>
</div>