Fatal编程技术网
  • html/
  • Html Can'；我不能让悬停装置工作

Html Can'；我不能让悬停装置工作

html css

Html Can'；我不能让悬停装置工作,html,css,Html,Css,我的3号在Y轴上旋转360度。 当我停在3号上时，它就停止转动了。 我尝试了名为“drie”的类：悬停显示；没有但那不行。 甚至在webkit表单上 我找不出问题出在哪里。。 我已经为你们做了一个决定 如果你们仍然找不到问题，这里是我的网站，如果需要的话也可以进行测试。这是学校的报告顺便说一句：） 将鼠标悬停在领带上并向下滚动，在这里您将看到数字3 我的网站只使用css和css3 有人提出了一个有用的建议吗？谢谢 ~~~更新~~~ 当我检查我的JSFIDLE good时，我只更改了有效的显示。

我的3号在Y轴上旋转360度。 当我停在3号上时，它就停止转动了。 我尝试了名为“drie”
的类：悬停显示；没有但那不行。
甚至在webkit表单上

我找不出问题出在哪里。。
我已经为你们做了一个决定

如果你们仍然找不到问题，这里是我的网站，如果需要的话也可以进行测试。这是学校的报告顺便说一句：）

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

我的网站只使用css和css3

有人提出了一个有用的建议吗？谢谢

~~~更新~~~

当我检查我的JSFIDLE good时，我只更改了有效的显示。
唯一的问题是我的网站上的代码以上我建议


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



如果您希望您的号码在悬停后仍能旋转，那么只需删除此
display:none


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



如果您希望您的号码在悬停后仍能旋转，那么只需删除此
显示：无


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



由于元素
id=“drie”
是
的后代，因此
.vierkant div:hover
规则也适用

将规则更改为
.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;
}



.vierkant div:hover
规则也适用，因为元素
id=“drie”
是
的后代

将规则更改为
.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;
}



请在此张贴相关代码。是否希望
3
在您
：悬停之前保持静止？然后在停止悬停时返回到静态？顺便说一句，如果我是你，你也应该添加for-moz-etc；）@阴影向导然后我必须在这里发布我的完整css，我不会那样做。；）在andyb，当我把数字3悬停，我看到一个大正方形旋转，它必须是数字3，而不是大正方形，所以你要求那些想帮助你访问你的网站的人，然后自己找到相关的代码？我不会那样做。请在这里发布相关代码。是否希望
3
在您
：悬停之前保持静态？然后在停止悬停时返回到静态？顺便说一句，如果我是你，你也应该添加for-moz-etc；）@阴影向导然后我必须在这里发布我的完整css，我不会那样做。；）在andyb，当我把数字3悬停，我看到一个大正方形旋转，它必须是数字3，而不是大正方形，所以你要求那些想帮助你访问你的网站的人，然后自己找到相关的代码？我不会那么做的。谢谢你，但还有一个问题。请查看我的网站了解真正的问题@RyandeVries看起来这也在你的网站上起作用。可能是你改变了：）我会在里面放一个背景图片，你会看到问题的。如果之前没有，请在Chrome中进行检查！^^正如我所看到的，你必须停在中间，虽然有点奇怪。谢谢你，但是还有一个问题。请查看我的网站了解真正的问题@RyandeVries看起来这也在你的网站上起作用。可能是你改变了：）我会在里面放一个背景图片，你会看到问题的。如果之前没有，请在Chrome中进行检查！^^正如我所看到的，你必须在中间盘旋，虽然有点奇怪……那就是我一直在寻找的awnser！非常感谢，很抱歉代码太多了…很高兴我能帮上忙！下一次，如果可以的话，请试着用小提琴重现这个问题，并发布相关的代码。虽然整个代码都是相关的，但我做到了，呵呵……那就是我正在搜索的awnser！非常感谢，很抱歉代码太多了…很高兴我能帮上忙！下一次，如果可以的话，请试着用小提琴重现这个问题，并发布相关代码。我做了，尽管整个代码都是相关的，呵呵。。