StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCan't get the hover working
text
Body
copied!<p>My number 3 is rotating on Y 360 degrees. When I hover my number 3, it's stops turning. I tried on the class named "drie"<code>:hover display;none;</code> but that won't work. Even on the webkit form.</p> <p>I can't find out what the problem is.. I have made a <a href="http://jsfiddle.net/chronel/mmKPn/" rel="nofollow">jsFiddle</a> for you guys.</p> <p>If you guys still can't find the problem, here is my website to sorta test it aswell if needed. It's a report for school btw :) <a href="http://rdv-design.com/stageverslag2/home.html" rel="nofollow">School Report</a></p> <p>Hover over the Tie and scroll down, here is where you will see the number 3.</p> <p>My website only uses css and css3.</p> <p>Someone has a suggestion that would help? Thanks!</p> <p>~~~<strong><em>UPDATE</em></strong>~~~</p> <p>As I checked my jsFiddle good, I only changed the display that works. The only problem excist on my website by codes above I suggest..</p> <pre><code>#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; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload