我正在开发标签滑块,并且快要完成了。但是,我遇到了一个使元素不可点击的问题。
当前,我有一个div
,类名为content
,其中包含滑块的所有内容。它位于slider div
上方。
由于内容位于slider div
上方,因此我决定将指针事件设置为none,以允许滑块工作。
var slider = $('.slider');
var tabone = $('.tabone');
var tabtwo = $('.tabtwo');
var overlayOne = $('.tabone .overlay');
var overlayTwo = $('.tabtwo .overlay');
var contentOne = $('.content-one');
var contentTwo = $('.content-two');
$('.btnsample').click(function() {
alert('ok');
});
slider.on('mouseover', function () {
if (slider.width() == 250) {
slider.width(800);
contentOne.toggleClass('o-hidden o-visible');
contentTwo.toggleClass('o-visible o-hidden');
overlayTwo.toggleClass('off on');
overlayOne.toggleClass('on off');
}
});
tabone.on('mouseover', function () {
if (slider.width() == 800) {
slider.width(250);
contentOne.toggleClass('o-visible o-hidden');
contentTwo.toggleClass('o-hidden o-visible');
overlayTwo.toggleClass('on off');
overlayOne.toggleClass('off on');
}
});
$('.tab-btn').click(function() {
alert('clickable');
});
.wrapper {
max-width: 960px;
width: 100%;
max-height: 410px;
height: 410px;
position: relative;
display: flex;
}
.tab {
width: 960px;
height: 410px;
}
.tab .overlay {
transition: opacity 1s ease-in-out;
}
.tabone {
position: absolute;
background: url('https://images.unsplash.com/photo-1508270355006-9e3484a234c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ab353574fe9402b9f3c4cf82053c36ad&auto=format&fit=crop&w=1993&q=80');
background-size: cover;
}
.slider {
width: 800px;
overflow: hidden;
display: inline-block;
transition: width 1s ease-in-out;
}
.forward-diagonal {
transform: skewX(-20deg);
}
.forward-diagonal-inner {
transform: skewX(20deg);
}
.backward-diagonal {
transform: skewX(20deg);
}
.backward-diagonal-inner {
transform: skewX(-20deg);
}
.tabtwo {
justify-content: flex-end;
margin-left: 76px;
background: url('https://images.unsplash.com/photo-1533176888412-f49e08b436a6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ba2943090f74337a3fb0c49c1d804e3&auto=format&fit=crop&w=1050&q=80');
background-size: cover;
}
.slider {
margin-left: -76px;
}
.content {
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
display: flex;
pointer-events: none;
}
.content p {
color: #ffffff;
font-size: 24px;
}
.content-one {
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
transition: all 1s ease-in-out;
}
.content-two {
width: 800px;
display: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
transition: all 1s ease-in-out;
}
.o-visible {
opacity: 1;
}
.o-hidden {
opacity: 0;
}
.overlay {
background-color: blue;
display:block;
width:100%;
height:100%;
}
.on {
opacity:.5;
}
.off {
opacity:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper">
<div class="tab tabone">
<div class="overlay off">
</div>
</div>
<div class="slider forward-diagonal">
<div class="tab tabtwo forward-diagonal-inner">
<div class="overlay on">
</div>
</div>
</div>
<div class="content">
<div class="content-one o-visible">
<p>Sample Text</p>
<button class="btnsample">click</button>
</div>
<div class="content-two o-hidden">
<p>Sample Text</p>
<button class="btnsample">click</button>
</div>
</div>
</div>
有什么方法可以使元素可单击,而不会破坏滑块的功能?
这是我的完整代码:https://jsfiddle.net/gyLoczb5/18/
答案 0 :(得分:2)
您可以在按钮上显式设置pointer-events
。
.content>.o-visible button {
pointer-events: auto;
}