無法獲得懸停工作

我的號碼3正在360度旋轉。當我懸停我的編號3時，它停止轉動。我嘗試過名爲「drie」的課程:hover display;none;，但這不起作用。即使在webkit窗體上。無法獲得懸停工作

我找不出問題所在。我爲您製作了jsFiddle。

如果你們仍然無法找到問題，這裏是我的網站sorta測試它，如果需要。這對學校的報告BTW :) School Report

將鼠標懸停在領帶和向下滾動，在這裏你會看到數字3

我的網站只使用CSS和CSS3。

有人有一個建議，可以幫助嗎？謝謝！

~~~ UPDATE ~~~

當我檢查了我的jsfiddle好，我只是改變了作品的顯示。唯一的問題excist在我的網站通過以上驗證碼我建議..

#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; 
}

來源

2013-06-04 Ryan de Vries

帖子相關的代碼，請。 –

在'：hover'之前，你是否希望'3'是靜態的？然後在停止懸停時回到靜態狀態？ – andyb

順便說一句，如果我是你，你應該添加-moz-等等） – DiederikEEn

.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; 
}

來源

2013-06-04 08:09:44 andyb

這是我正在尋找的awnser！非常感謝很多代碼的負載.. –

很高興我可以幫助！下一次，如果可以，請嘗試在小提琴中重現問題併發布相關代碼。 – andyb

雖然整個代碼都是相關的，但我確實.. –

如果您想您的號碼應該得到甚至懸停後旋轉不僅僅是刪除此display:none;

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

JS Fiddle

來源

2013-06-04 07:49:37 Sachin

謝謝你，但這又是一個問題。請查看我的網站以瞭解真正的問題！ –

@RyandeVries它看起來這也適用於您的網站。可能是你已經改變了它:) – Sachin

我會把它的背景圖像，你會看到這個問題。如果你以前沒有在Chrome中檢查它，請檢查它！ ^^正如我所見，你必須懸停在中間，雖然有點奇怪.. –

無法獲得懸停工作

回答

相關問題