3

我制作了一个网站，该网站的右侧有一个报价标签。当您将鼠标悬停在选项卡上时，位置会发生变化，人们可以选择不同的日期来接收报价。这适用于所有浏览器。最近我在 Ipad 上打开它，该框仍然出现，其中包含正确的数据，但它始终处于全视图中，而不仅仅是选项卡。它不再有悬停状态。我想做的是在 Ipad 上拥有它，这样我就可以将选项卡拖到或点击它，然后让选项卡像浏览器一样滑动到框的整个宽度。这是我的标记

HTML：

<div id="quote">
</div>

查询：

<script>
    $(document).ready(function() {
        $('#quote').css({
            backgroundPosition: "0 0"
        }).hover(function() {
            $(this).stop().animate({
                height: '150px',
                width: '250px',
                backgroundPosition: "(200px 0px)"
            }, {
                duration: 900
            });
        }, function() {
            $(this).stop().animate({
                height: '150px',
                width: '150px',
                backgroundPosition: "(0px 200px)"
            }, {
                duration: 900
            });
        });
    });
</script>

CSS：

#quote {
    position: absolute;    
    top: 100px;
    right: -85px;
    height: 150px;
    width: 150px;
    background:red;
    transition:right 2s;
    -webkit-transition:right 2s /* Safari */
    -moz-transition:right 2s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius:20px;
    background-color:#9C1818;
    color: white;
}

#quote:hover {
    right: -15px;
    width:150px;
    height:150px;
    -ms-transform:rotate(0deg); /* IE 9 */
     -moz-transform:rotate(0deg); /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
    -o-transform:rotate(0deg); /* Opera */
}

#quote p {
    width: 100px;
    position: relative;
    display:block;
    font-weight: bold;
    padding-top: 30px;
    padding-left: 25px;
}

#quote:hover p {
    padding-top: 10px;
}

#quote {
background: #9C1818;
height: 150px;
width: 150px;
border-radius: 10px;
margin-right: -100px;
position: absolute;
right: 0;
top: 60px!important;

}

#quote p {
    -ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
margin-top: 59px;
margin-left: -50px;
color: white;
}

#quote:hover p {
     transform:rotate(0deg);
    -webkit-transform:rotate(0deg); /* Safari */
    -ms-transform:rotate(0deg); /* IE 9 */
     -moz-transform:rotate(0deg); /* Firefox */
     -webkit-transform:rotate(0deg); /* Safari and Chrome */
     -o-transform:rotate(0deg); /* Opera */
     color: white;
     margin-left: 0;
margin-top: 0;
}

以下是它在浏览器上的工作方式：http: //jsfiddle.net/mandykiwi/Jfz4F/

我确定那里有大量额外的 css，但它可以工作，所以我不会碰它，除非我必须这样做。

谁能指出我正确的方向？似乎只有在 Apple 设备上才会发生这种情况。谢谢

4

0 回答 0