0

このリンクによると、移行のために自分の質問を再投稿またはフラグ付けしますか?

有用な回答を得るために、質問を再投稿する必要があります。

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>

出力ページのスクリーンショットは次のとおりです。

ホバー前:-

ここに画像の説明を入力

ホバー後:-

ここに画像の説明を入力

サファリのスクリーンショット ここに画像の説明を入力

4

2 に答える 2

1

caniuseによると、サファリが機能するには-webkit-プレフィックスが必要です。また、視点の長さの後に単位がありません。

完全を期すためにコメントから編集します。

また、使用する必要があります-webkit-transition: all 1ms ease;

于 2015-01-06T13:59:51.933 に答える