如何添加 :hover 没有动画 jquery 停止工作？

Question

此代码有效：

https://jsfiddle.net/9du21gtn/

但是如果我有这个：

.linguait:hover{
    border: 3px solid #888888;;
    -webkit-transition: border 500ms linear;
    -moz-transition: border 500ms linear;
    -o-transition: border 500ms linear;
    -ms-transition: border 500ms linear;
    transition: border 500ms linear;    
}
.linguait:hover > .it{
    color: #888888;
    -webkit-transition: color 500ms linear;
    -moz-transition: color 500ms linear;
    -o-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

它不再工作了：

https://jsfiddle.net/9du21gtn/1/

我该怎么办？

Answer 1

因为您要覆盖悬停中的过渡属性 class。这是工作代码：

.linguait{
    position: absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid #c8c8c8;
    top:50%;
    margin-top: -20px;
    right: 5%;
    margin-right: -2px;
    -webkit-transition: border 500ms linear;
    -moz-transition: border 500ms linear;
    -o-transition: border 500ms linear;
    -ms-transition: border 500ms linear;
    transition: border 500ms linear;
    -webkit-transition: border 500ms, right 2s, margin-right 2s, -webkit-transform 2s;
    transition: border 500ms, right 2s, margin-right 2s, transform 2s; 
}

.linguait.active{
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s; 
}

.it{
    position: relative;
    font-family: 'Signika', sans-serif;
    font-size: 20px;
    color: #c8c8c8;
    top: 7.5px;
    -webkit-transition: color 500ms linear;
    -moz-transition: color 500ms linear;
    -o-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

.linguait:hover{
    border: 3px solid #888888;;
}
.linguait:hover > .it{
    color: #888888;
}