根据此链接重新发布或标记我自己的迁移问题？
我必须重新发布我的问题以获得有用的答案。根据 CSS，在悬停时，门应该是打开的。它适用于 Firefox、Opera、Chrome 和 IE，但在 Safari 5.1.7 中对悬停没有影响。这里的问题在哪里？此悬停的 CSS 部分如下：
$(document).ready(function() {
$("#cupboard").on("touchstart", function(e) {
$(this).addClass("hover");
e.preventDefault();
});
$("body").on("touchend", function(e) {
$("#cupboard").removeClass("hover");
});
}); html,
body {
margin: 0;
padding: 0;
background: #C2B3A0;
}
/*user-select: none;*/
/*background: url(bg.jpg);*/
#cupboard {
height: 613px;
width: 617px;
position: relative;
left: 35%;
margin-left: -112px;
top: 24px;
bottom: 31px;
perspective: 500;
background: url(bg.png);
background-position: center center;
background-size: 95%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#cupboard img {
position: inherit;
height: 200px;
width: 200px;
float: left;
margin-left: 62px;
margin-top: 82px;
}
#cupboard .door#left {
zoom: .6;
position: absolute;
width: 512px;
height: 100%;
background-image: url(dl.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#right {
zoom: .6;
position: absolute;
width: 517px;
height: 100%;
background-image: url(dr.jpg);
transition: transform 1s ease;
transform: rotateY(0);
}
#cupboard .door#left {
transform-origin: top left;
left: 0;
}
#cupboard .door#right {
transform-origin: top right;
right: 0;
}
#cupboard:hover #left,
#cupboard.hover #left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
#cupboard:hover #right,
#cupboard.hover #right {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}<html>
<head>
<script src="http://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="cupboard">
<a href="http://www.facebook.com">
<img src="f.jpeg" alt="facebook" />
</a>
<a href="http://www.twitter.com">
<img src="t.jpeg" alt="twiter" />
</a>
<a href="http://www.linkedin.com">
<img src="l.png" alt="linkedin" />
</a>
<a href="http://www.wordpress.com">
<img src="w.jpg" alt="wordpress" />
</a>
<div class="door" id="left"></div>
<div class="door" id="right"></div>
</div>
</body>
</html>这是输出页面的截图：-
悬停前：-
悬停后：-
Safari 截图
