0

我的 3 号在 Y 轴上旋转 360 度。当我悬停我的数字 3 时，它停止转动。我尝试了名为“drie”的课程:hover display;none;，但这不起作用。即使在 webkit 表单上。

我无法找出问题所在。我为你们制作了一个jsFiddle 。

如果你们仍然找不到问题，这里是我的网站，如果需要也可以对其进行测试。这是学校的报告 btw :)学校报告

将鼠标悬停在领带上并向下滚动，您将在这里看到数字 3。

我的网站只使用 css 和 css3。

有人有帮助的建议吗？谢谢！

~~~更新~~~

当我检查我的 jsFiddle 时，我只更改了有效的显示。我建议的上述代码在我的网站上存在的唯一问题..

#shirt img{
    position:absolute;
    left:auto;
    right:auto;
    margin-left:-266px;
}

#shirt_line img{
    position:absolute;
    background-repeat:repeat-y;
    margin-top:-130px;
    margin-left:-4px;
    left: auto;
    right:auto;
}

.pochet{
    position:absolute;
    right:118px;
    top:465px;
    width:247px;
    height:287px;
    z-index:1;
    transition:.85s;
}

.pochet:hover{
    top: 230px; 
}

#borstzakje{
    position:absolute;
    right:120px;
    top:480px;
    width:247px;
    height:287px;
    z-index:2;
}

.stropdashouder img{
    position:absolute;
    width:116px;
    height:274px;
    top:0px;
    margin:0 auto;
    margin-left:-60px;
    cursor:pointer;
    z-index:1;
}




.vierkant > div{
    position:absolute;
    background-color:;
    height:254px;
    width:116px;
    top:0;
    left:50%;
    margin-left:-58px;
    z-index:10;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

.vierkant > div:hover{
    margin-left:0;
    background-color:#FF6600;
    height:90%;
    width:90%;
    top:5%;
    left:5%;
    z-index:10;
}

.vierkant div.content{
    opacity:0;
    height:100%;
    width:100%;
    top:0%;
    left:0%;
    overflow:scroll;
    overflow-x:hidden;
}

.vierkant:hover div.content{
    opacity:1;

    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

#contenttekst{
    position:relative;
    width:100%;
    height:100%;    
    margin-left:-68px;
    top:5%;
    left:10%;
    text-align:left;
}

#start{
    position:relative;
    width:750px;;
    height:100%;
    margin-left:-48px;
    left:-0%;
    text-align:left;
    z-index:1;
}


#tekst{
    position:absolute;
    width:80%;
    height:95%;
    top:2%;
    left:auto;
    right:auto;
    display: none;
    color:#FFFFFF;
    z-index:4;

}

#stropdas{  
    position:absolute;
    width:116px;
    height:274px;
    top:0px;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
}

#ikzelf{
    position:absolute;
    float:right;
    padding: 6px 6px 6px 6px;
    top:50px;
    left:590px;
    z-index:1;
}

#leerdoel2{
    margin-left:-26px;
}


/* vlekken */

#blok{
    position:absolute;
    width:576; 
    height:104;
    top:1950px;
    left:68px;
    z-index:1;
    opacity:0.1;
}




/*html, css, js*/
#vlek1{
    background-image:url(../img/vlek1.png);
    background-repeat:no-repeat;
    position:absolute;
    top:1800px;
    left:20px;
    width:163px;
    height:113px;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek1:hover{
    position:absolute;
    left:20px;
    width:;
    height:;
}

#vlek1 #html{
    position:absolute;
    top:150px;
    left:60px;
    width:163px;
    height:113px;
    opacity:0;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek1:hover #html{
    position:absolute;
    top:150px;
    left:60px;
    width:163px;
    height:113px;

    opacity:1;
    z-index:2;

    /*-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;*/
}

#vlek1:hover #html:hover img{
    display:none;
    visibility:hidden;
}

#vlek3{
    background-image:url(../img/vlek3.png);
    background-repeat:no-repeat;
    position:absolute;
    top:1800px;
    left:310px;
    width:163px;
    height:113px;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek3:hover{
    position:absolute;
    left:310px;
    width:;
    height:;
}

#vlek3 #css{
    position:absolute;
    top:150px;
    left:-230px;
    width:163px;
    height:113px;
    opacity:0;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek3:hover #css{
    position:absolute;
    top:150px;
    left:-230px;
    width:163px;
    height:113px;

    opacity:1;
    z-index:2;

    /*-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;*/
}

#vlek3:hover #css:hover img{
    display:none;
    visibility:hidden;
}

#vlek4{
    background-image:url(../img/vlek4.png);
    background-repeat:no-repeat;
    position:absolute;
    top:1800px;
    left:600px;
    width:163px;
    height:113px;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek4:hover{
    position:absolute;
    left:600px;
    width:;
    height:;
}

#vlek4 #jsandjq{
    position:absolute;
    top:150px;
    left:-520px;
    width:163px;
    height:113px;
    opacity:0;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek4:hover #jsandjq{
    position:absolute;
    top:150px;
    left:-520px;
    width:163px;
    height:113px;

    opacity:1;
    z-index:2;

    /*-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;*/
}

#vlek4:hover #jsandjq:hover img{
    display:none;
    visibility:hidden;
}

/*eind html, css, js*/

#vlek2{
    position:absolute;
    float:right;
    padding: 6px 6px 6px 6px;
    top:30px;
    left:490px;
    z-index:0;
}


/*eind vlekken*/

/*#knoopvlak{
    position:absolute;
    width:100%; 
    height:114px;
    top:400px;
    margin:0 auto;
}*/


/* Turning Knopen */
.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

.knoop2 img{
    position:absolute;
    cursor:pointer;
    width:114px;
    height:114px;
    top:700px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

        -webkit-transition-duration: 1.6s;
        -moz-transition-duration: 1.6s;
        -o-transition-duration: 1.6s;
        transition-duration: 1.6s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}

.knoop2:active img{
    -webkit-transform:rotate(1126deg);
    -moz-transform:rotate(1126deg); 
    -o-transform:rotate(1126deg);
}

#één img{
    position:absolute;
    width:24px;
    height:86px;
    margin-top:-96px;
    left:440px;

    -webkit-transition-duration: 1.6s;
    -moz-transition-duration: 1.6s;
    -o-transition-duration: 1.6s;
    transition-duration: 1.6s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}

#één:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

/* TWEE */
.object {
    position: absolute;

    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
}
.van {
    margin-top:-104px;
    left:440px;
}

#twee:hover .move-right{
    transform: translate(300px,0);
    -webkit-transform: translate(300px,0); /** Chrome & Safari **/
    -o-transform: translate(300px,0); /** Opera **/
    -moz-transform: translate(300px,0); /** Firefox **/
}
/* EIND TWEE */

#drie{
    position: absolute;
    margin-top:-104px;
    left:440px;
    width:58px;
    height:101px;
    z-index:1;

    -webkit-animation:rotate 5s linear 0s infinite normal none; /* Safari & Chrome */
    -moz-animation:rotate 5s linear 0s infinite normal none;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
}



@-webkit-keyframes rotate {
    from {
      -webkit-transform: rotateY(0deg); 
      -moz-transform: rotateY(0deg);
      }
    to {
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
    }
}

#square{
    background-color:#ff6600;
    position:absolute;
    width:58px;
    height:101px;
    margin-top:-104px;
    left:440px;
    z-index:9999;
    opacity:0.1;
}
4

2 回答 2

2

如果您希望您的号码即使在悬停后也应该旋转，而不仅仅是删除它display:none;

#drie:hover{
    -webkit-animation:rotate 5s linear 0s infinite normal none; /* Safari & Chrome */
    -webkit-backface-visibility: visible;
    /*display:none;*/
}

JS小提琴

于 2013-06-04T07:49:37.373 回答
1

该.vierkant div:hover规则也适用，因为该元素id="drie"是<div><div class="vierkant">

将规则更改.vierkant > div:hover为仅针对直接子级。这将停止3出现多个 s。

现在3似乎一直在旋转，这与其他数字不同，它们仅在动画上显示，:hover因此您似乎真的只想要以下 CSS。

#drie {
position: absolute;
    left:440px;
}

#drie:hover {
    -webkit-animation:rotate 5s linear 0s infinite normal none; /* Safari & Chrome */
    -webkit-backface-visibility: visible;
}

如果你想3不断旋转，只需组合成一个选择器：

#drie {
position: absolute;
    left:440px;
    -webkit-animation:rotate 5s linear 0s infinite normal none; /* Safari & Chrome */
    -webkit-backface-visibility: visible;
}
于 2013-06-04T08:09:44.203 回答