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>

Answer 2

也许是这样？

 $('#step1').click(function () {
      $('#step1 .design-steps, #step1 .hidden-steps').fadeToggle();
    });
    
     $('#step2').click(function () {
      $('#step2 .design-steps, #step2 .hidden-steps').fadeToggle();
    });
    
    

       
       
$('#step1').hover(function() {
    $(this).find('.design-steps').fadeOut(500);
  	$(this).find('.hidden-steps').fadeIn(500);
}, function() {
    $(this).find('.hidden-steps').fadeOut(500);
  	$(this).find('.design-steps').fadeIn(500);
});

.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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/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 3

试试这个。操作取决于它加载的屏幕。在移动设备上，点击时会发生这种情况，而在大于768px 的设备上，会发生在悬停时。

您可以在脚本中更改屏幕限制

$(document).ready(function(){

if ($(window).width() < 768) {
    $('#step1').click(function () {
      $('#step1 .design-steps, #step1 .hidden-steps').fadeToggle();
    });
    
    $('#step2').click(function () {
      $('#step2 .design-steps, #step2 .hidden-steps').fadeToggle();
    });
}
else {
    $('#step1').mouseenter(function () {
      $('#step1 .design-steps, #step1 .hidden-steps').fadeToggle();
    });
    $('#step1').mouseleave(function () {
      $('#step1 .design-steps, #step1 .hidden-steps').fadeToggle();
    });
    $('#step2').mouseenter(function () {
      $('#step2 .design-steps, #step2 .hidden-steps').fadeToggle();
    });
    $('#step2').mouseleave(function () {
      $('#step2 .design-steps, #step2 .hidden-steps').fadeToggle();
    });
 }
});

.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>