gpt4 book ai didi

javascript - ie11 css 旋转 - 背景元素不可点击

转载 作者:技术小花猫 更新时间:2023-10-29 12:25:22 24 4
gpt4 key购买 nike

我正在创建一个选项卡界面,其中事件选项卡具有旋转转换,允许预览下一个选项卡。单击预览区域中的按钮将打开下一个选项卡。

这在除 IE11 之外的所有浏览器中都可以正常工作。请参阅下面的代码段。

$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}

.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}

.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}

.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}

.container .tab-1 {
z-index: 2;
}

.container .tab-1 .content {
background-color: red;
}

.container .tab-2 {
z-index: 1;
height: 200%;
}

.container .tab-2 .content {
background-color: green;
}

.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>

<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>

我认为问题是尽管 IE 明显地执行了旋转,但原始边界区域本身并没有旋转,因此点击没有应用到背景元素上。

有人知道我该如何解决这个问题吗? jsfiddle 在这里:https://jsfiddle.net/bmq2e2ae/1/

最佳答案

要使其在 IE 中工作,您可以为 .tab .content 添加 pointer-events: none 并将 pointer-events 返回到.tab .content 的子项的初始状态。

演示:

$(document).ready(function() {
$('button').click(function() {
alert('Button was clicked');
});
})
* {
margin: 0;
padding: 0
}

.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}

.container .tab {
position: absolute;
top: 0;
left: 0;
width: 185%;
height: 140%;
transform: translateX(-50%) rotate(-25deg);
transform-origin: 50% 0;
overflow: hidden;
}

.container .tab .content {
transform: rotate(25deg);
transform-origin: 0 0;
margin-left: 50%;
position: relative;
height: 75%;
width: 55%;
}

.container .tab-1 {
z-index: 2;
}

.container .tab-1 .content {
background-color: red;
}

.container .tab-2 {
z-index: 1;
height: 200%;
}

.container .tab-2 .content {
background-color: green;
}

.container .tab-2 button {
position: absolute;
bottom: 37%;
right: 20px;
}

/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}

/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="tab tab-1">
<div class="content"></div>
</div>

<div class="tab tab-2">
<div class="content">
<button type="button">
Click me
</button>
</div>
</div>
</div>

您还将此 hack 包装在媒体查询浏览器 hack 中,仅在 IE 中进行评估

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
/* IE Hack: disable pointer-events */
.container .tab .content {
pointer-events: none;
}

/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
pointer-events: initial;
}
}

关于javascript - ie11 css 旋转 - 背景元素不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45405570/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com