jQuery как переключить на мыши ввести или наведите указатель мыши?

Я пытаюсь получить jQuery toggle для работы над вводом или вводом мыши, но не совсем понимаю, как заставить его работать. На данный момент я установил его для переключения по клику, который отлично работает. В идеале я бы хотел, чтобы он нажимал на мобильные устройства, но для рабочего стола я предпочитаю эффект зависания.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>

источник

2016-12-22 rufus

Он работает отлично для зависания мыши в настольной версии хром –

Stack Overflow не является услугой написания кода. Вы должны хотя бы попытаться сделать это в одиночку. –

Я просто ищу совет не для кого-либо, чтобы сделать это для меня, я добавил к оригинальной разметке, что я пытался сделать, касаясь мыши, и оставьте ее – rufus

На самом деле я не вижу никаких причин, чтобы сделать это с JQuery, так как вы сказали, что вы ищете hover решение (а не щелкнуть).

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

источник

2016-12-22 12:22:55 Dekel

. Это очень понравилось, потому что я очень благодарен за то, что вы всегда можете забыть сделайте гораздо больше с css в эти дни – rufus

Добро пожаловать :) рад, что я мог бы помочь! – Dekel

Может быть так?

$('#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); 
 
    \t $(this).find('.hidden-steps').fadeIn(500); 
 
}, function() { 
 
    $(this).find('.hidden-steps').fadeOut(500); 
 
    \t $(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>

источник

2016-12-22 12:41:16 Alex

Спасибо, что отлично поработали – rufus

Попробуйте это. действие зависит от экрана, на который он загружается. В мобильном устройстве это происходит при щелчке, а на устройствах больше 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>

источник

2016-12-22 12:53:34 ab29007

jQuery как переключить на мыши ввести или наведите указатель мыши?

ответ

Смежные вопросы