我在 Chrome/Safari 浏览器下遇到问题。应用 CSS3 转换后,我没有收到 mouseup 和 click 事件(在 IE9/10 下效果很好)。
这是我不工作的示例:
<script type="text/javascript">
$(".box").mousedown(function (e) {
$(this).addClass('transform');
});
$(".box").mouseup(function (e) {
$(this).removeClass('transform');
});
$(".box").click(function (e) {
alert("Click"); // Not worked under Chrome/Safari !
});
</script>
<div class="box"></div>
和 CSS3 样式:
.box {
background-color:#f00;
width:200px;
height:200px;
}
.transform {
transform-origin: 0% 50%;
transform: rotateY(10deg);
-ms-transform-origin: 0% 50%;
-ms-transform: rotateY(10deg);
-webkit-transform-origin: 0% 50%;
-webkit-transform: rotateY(10deg);
}
最佳答案
问题是你需要设置position:absolute
:
.transform {
transform-origin: 0% 50%;
transform: rotateY(30deg);
-ms-transform-origin: 0% 50%;
-ms-transform: rotateY(30deg);
-webkit-transform-origin: 0% 50% 0px;
-webkit-transform: rotateY(-31deg);
}
你可以查看这个关于转换的链接
关于jquery - CSS3改造后点击不来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11675107/