Question

根据此链接Repost or flag my own question for migration?

我应该重新提出我的问题以获得有用的答案。

根据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>

这是输出页面的sreenshot： -

悬停之前： -

enter image description here