Question

根据CSS，在悬停时，门应该打开。它适用于Firefox，Opera，Chrome和IE，但对Safari 5.1.7中的悬停没有影响。这里的问题在哪里？此悬停的CSS部分如下：

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代码： -

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

这是jQuery代码： -

$(document).ready(function() {
$("#cupboard").on("touchstart", function(e) { 
  $(this).addClass("hover");
  e.preventDefault();
});

$("body").on("touchend", function(e) {
  $("#cupboard").removeClass("hover");
});

});

这是输出页面的sreenshot： -

悬停之前： - enter image description here

悬停后： - enter image description here

CSS Hover门打开效果不适用于Safari

0 个答案: