jquery how to toggle on mouse enter or hover?

Question

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.

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>

Answer 1

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>

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

Answer 3

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

Pure css is always better:

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