0

私の番号 3 は、Y 軸上で 360 度回転しています。番号 3 をホバーすると、回転が停止します。「drie」という名前のクラスを試してみました:hover display;none;が、うまくいきません。Webkitフォームでも。

私は問題が何であるかを見つけることができません..私は皆さんのためにjsFiddleを作りました。

それでも問題が見つからない場合は、必要に応じてテストするための私の Web サイトを参照してください。学校のレポートです :)学校のレポート

Tie にカーソルを合わせて下にスクロールすると、数字の 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の が表示されなくなります。

現在、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常に回転させたい場合は、1 つのセレクターに結合するだけです。

#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 に答える