我试图让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>
答案 0 :(得分: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>
答案 1 :(得分:1)
也许是这样?
$('#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>
答案 2 :(得分:1)
试试这个。该操作取决于它加载的屏幕。在移动设备中,这种情况发生在点击时,而设备大于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();
});
}
});
&#13;
.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;
}
&#13;
<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>
&#13;