Animation not working on the all Anchor Tag

user_15012172 0
Viewed 84

I have problem in arrow animation on the hover of the Anchor Tag. While I am hover on the first Anchor tag animation working properly and changing style with the JavaScript. But problem is the while I am using multiple Anchor tag it's only work perfect in the first one and while in another Anchor tag java script not working properly. I try many solution but not fix the issue. Please give me suggestion on it. I wrote my code below. Thank You.

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>

svg css html javascript
2 Answers

Change the id of ab and xy to class instead. If you use the same id, only the first element will take effect.

Then again, you gotta edit your javascript too.

** update ** Instead of directly adding the styling, you may try adding a class to edit the hover behavior.

P.S. I've updated the javascript for btn1 only.

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>

user_91661430

Please following the above code :

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>

user_118776900
Related