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

I am trying to get a jQuery toggle to work on either hover or mouse enter but don't quite understand how to get it to work. At the moment I have set it up to toggle on click which works fine. Ideally i would like it on click for mobile devices but for desktop i prefer the hover effect.

我试图让jQuery切换到鼠标或鼠标进入，但不太明白如何让它工作。现在我已经设置好了，点击它可以正常工作。理想情况下，我希望它能点击移动设备，但对于桌面我更喜欢鼠标悬停效果。

https://jsfiddle.net/d8k3cn6a/

https://jsfiddle.net/d8k3cn6a/

Here is my markup

这是我的标记

  $('#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>

3 个解决方案

#1

Actually I don't see any reason to do this with jQuery, since you said you are looking for a hover solution (and not click).

实际上，我没有任何理由使用jQuery，因为您说您正在寻找一个悬停解决方案(而不是单击)。

Pure css is always better:

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

#2

Maybe so?

也许是这样吗?

 $('#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>

#3

Try this. the action depends on the screen that it loads in. in mobile this happens on click while on devices bigger then 768px this happens on hover.

试试这个。操作取决于它加载的屏幕。在移动设备上，当你在移动设备上点击鼠标时，就会出现在鼠标悬停的时候。

you can change the screen limit in the script

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

$(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>