无法使悬停工作

时间：2013-06-04 07:45:29

标签： html css css3

我的3号在Y上旋转360度。 当我将我的3号悬停时，它会停止转动。 我尝试了名为“drie”:hover display;none;的类，但这不起作用。 甚至在webkit表单上。

我无法找出问题所在.. 我为你们做了jsFiddle。

如果你们仍然找不到问题，我的网站也可以根据需要进行排序测试。这是学校的报告btw :) School Report

将鼠标悬停在领带上并向下滚动，此处您将看到数字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;
}

2 个答案:

答案 0 :(得分：2)

如果您希望即使在悬停后您的号码也应该旋转，只需删除此display:none;

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

JS Fiddle

答案 1 :(得分：1)

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

的<div class="vierkant">后代

将规则更改为.vierkant > div:hover，仅定位直接子项。这将停止出现多个3。

现在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;
}
相关问题
最新问题