小贝子编程

动画不能在所有锚标记上工作



我在锚标记悬停的箭头动画上有问题。当我悬停在第一个锚标记动画正常工作和改变JavaScript风格。但问题是，当我使用多个锚标记，它只工作完美的第一个，而在另一个锚标记java脚本不能正常工作。我尝试了许多解决方案，但没有解决这个问题。请给我一些建议。我把代码写在下面。谢谢你。

var timeout;
var element = document.getElementById("btn");
element.onmouseover = function (e) {
timeout = setTimeout(function () {
document.getElementById("ab").style.display = "none";
document.getElementById("xy").style.display = "block";
}, 700)
};
element.onmouseout = function (e) {
if (timeout) {
document.getElementById("ab").style.display = "block";
document.getElementById("xy").style.display = "none";
clearTimeout(timeout);
}
}
.main-arrow {
transition-delay: 0.2s;
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.sec-arrow {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.hori,
.sec-hori {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.btn:hover .arrow {
animation-name: mainrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .hori {
animation-name: hori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .sec-hori {
animation-name: sechori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .sec-arrow {
animation-name: secondrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .main-arrow {
animation-name: rotatingarrow;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
transition-duration: 0.5s;
}
#xy {
display: none;
}
/* main */
@keyframes mainrotatingarrow {
0% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
}
/* second */
@keyframes secondrotatingarrow {
0% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}

}
@keyframes hori {
0% {
d: path("M16 7L0 7");
}
100% {
d: path("M16 7L5 7");
}
}
@keyframes sechori {
0% {
d: path("M16 7L5 7");
}
100% {
d: path("M16 7L0 7");
}

}
@keyframes rotatingarrow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
<a href="#" class="btn" id="btn">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow" id="xy">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
<a href="#" class="btn" id="btn">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow" id="xy">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
<a href="#" class="btn" id="btn">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow" id="xy">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>

将ab和xy的id改为class。如果使用相同的id，则只有第一个元素生效。

然后，你也要编辑你的javascript。

** update **您可以尝试添加一个类来编辑悬停行为，而不是直接添加样式。

注:我只更新了btn1的javascript。

var btn1 = document.getElementById('btn1');
var timeout1;

btn1.onmouseover = function(e) {
timeout1=  setTimeout(function(){

document.getElementById('xy1').classList.add('display-block');
document.getElementById('ab1').classList.add('display-none');
}, 700);
};
btn1.onmouseout = function(e) {

if(timeout1){
document.getElementById('xy1').classList.remove('display-block');
document.getElementById('ab1').classList.remove('display-none');
clearTimeout(timeout1);
}
};
.main-arrow {
transition-delay: 0.2s;
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.sec-arrow {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.hori,
.sec-hori {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.btn:hover .arrow {
animation-name: mainrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .hori {
animation-name: hori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .sec-hori {
animation-name: sechori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .sec-arrow {
animation-name: secondrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .main-arrow {
animation-name: rotatingarrow;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
transition-duration: 0.5s;
}

/* added new class */
.btn:hover .display-none , .xy {
display: none !important;
}

.btn:hover .display-block {
display: block  !important;
}
/* main */
@keyframes mainrotatingarrow {
0% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
}
/* second */
@keyframes secondrotatingarrow {
0% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}

}
@keyframes hori {
0% {
d: path("M16 7L0 7");
}
100% {
d: path("M16 7L5 7");
}
}
@keyframes sechori {
0% {
d: path("M16 7L5 7");
}
100% {
d: path("M16 7L0 7");
}

}
@keyframes rotatingarrow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
<a href="#" class="btn" id="btn1">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow ab" id="ab1">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy1">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
<a href="#" class="btn" id="btn2">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow ab" id="ab2">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy2">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
<a href="#" class="btn" id="btn3">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow ab" id="ab3">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy3">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>

请按上述代码操作:

var myVar;
function hoverTrue(event) {
myVar = setTimeout(function () {
document.querySelector("#xy"+event).style.display = "block";
document.querySelector("#ab"+event).style.display = "none";
}, 700);
}
function hoverFalse(event) {
clearTimeout(myVar);
document.querySelector("#xy"+event).style.display = "none";
document.querySelector("#ab"+event).style.display = "block";
}
.btn{
margin-bottom:20px;
}
.main-arrow {
transition-delay: 0.2s;
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.sec-arrow {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.hori,
.sec-hori {
transform-box: fill-box;
transform-origin: center;
transition-duration: 0.5s;
}
.btn:hover .arrow {
animation-name: mainrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .hori {
animation-name: hori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.btn:hover .sec-hori {
animation-name: sechori;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .sec-arrow {
animation-name: secondrotatingarrow;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-delay: 0.7s;
}
.btn:hover .main-arrow {
animation-name: rotatingarrow;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
transition-duration: 0.5s;
}
.xy {
display: none;
}
/* main */
@keyframes mainrotatingarrow {
0% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
}
/* second */
@keyframes secondrotatingarrow {
0% {
d: path("M10.5 0.999999L10.5 7L10.5 13");
}
30% {
d: path("M10.5 0.999999L12 7L10.5 13");
}
65% {
d: path("M10.5 0.999999L14 7L10.5 13");
}
100% {
d: path("M10.5 0.999999L16.5 7L10.5 13");
}
}
@keyframes hori {
0% {
d: path("M16 7L0 7");
}
100% {
d: path("M16 7L5 7");
}
}
@keyframes sechori {
0% {
d: path("M16 7L5 7");
}
100% {
d: path("M16 7L0 7");
}
}
@keyframes rotatingarrow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
<div class="btn" id="btn" onmouseover="hoverTrue('0')" onmouseout="hoverFalse('0')">
<a href="#" id="qq">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab0" class="ab"> 
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy0">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
</div>
<div class="btn" id="btn" onmouseover="hoverTrue('1')" onmouseout="hoverFalse('1')">
<a href="#">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab1">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy1">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
</div>
<div class="btn" id="btn" onmouseover="hoverTrue('2')" onmouseout="hoverFalse('2')">
<a href="#">
<span> View More</span>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none" id="svg-ax">
<g class="main-arrow" id="ab2">
<path class="hori" d="M16 7L0 7" stroke="#00AEEF" />
<path class="arrow" d="M10.5 0.999999L16.5 7L10.5 13" stroke="#00AEEF" />
</g>
<g class="second-arrow xy" id="xy2">
<path class="sec-hori" d="M16 7L5 7" stroke="#00AEEF" />
<path class="sec-arrow" d="M10.5 0.999999L10.5 7L10.5 13" stroke="#00AEEF" />
</g>
</svg>
</a>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium