logo标签列表

所有锚点上的动画无法正常工作

javascripthtmlcsssvg
3

当我鼠标悬停在锚点标签上时，箭头动画出现问题。当我悬停在第一个锚点标签上时，动画可以正常工作，并且通过JavaScript更改样式。但是问题在于，当我使用多个锚点标签时，它只能在第一个标签中完美地工作，而在另一个锚点标签中javascript无法正常工作。 我尝试了很多解决方案，但没有解决该问题。 请给我建议。我在下面写了我的代码。谢谢。

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>

您有多个具有相同 ID 值的元素，这是无效的。 - Robert Longson
@robert Longson，是的，我已经更改了，但仍然不能正常工作... - Bhavik
你的问题仍然存在无效的ID值，所以如果你已经更改了它，我们无法看到你仍然犯了什么错误，因为你没有向我们展示。如果你的编辑会使现有答案失效，你可能需要提出一个新的问题。 - Robert Longson
@RobertLongson 我修改了代码，但现在JavaScript不起作用了。你能帮忙检查一下吗？ - Bhavik
2个回答
3
将ab和xy的id更改为class。 如果使用相同的id，只有第一个元素会生效。
然后，你还需要编辑你的javascript。
**更新** 而不是直接添加样式，可以尝试添加一个类来编辑hover行为。
附言：我已经更新了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>

是的，我犯了那个错误。但是在鼠标悬停时，我需要使用JavaScript显示和隐藏元素。如果您在我的代码中注释掉JavaScript，则在悬停时所有动画都可以正常运行。但是当我再次应用JavaScript时，同样的问题出现了，只有第一个锚点标签起作用，其他标签不起作用。 - Bhavik
但是在那个时候，"ab"和"xy"都会显示，我需要只显示一个，并在悬停时隐藏"ab"并显示"xy"。当鼠标离开时，"xy"将被隐藏，"ab"将显示为块。 - Bhavik
似乎添加一个新类并在鼠标悬停时更改按钮样式就可以解决问题。不过我只将其应用于button1。 - joohong89
@joohoong89 让我检查一下，非常感谢您的关注。 - Bhavik
1
请按照上面的代码进行操作： 

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接