Button hover animation bug, when hovering over icon-CodePudding

When hovering over the arrow-icon of the button, for one moment, the text on the right side appears and the arrow-icon changes back to the chevron-icon. It seems like the "mouseout" event fires, even though I'm still hovering over the button. How do I prevent this?

const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")

//Changes icon to arrow

inviteButton.addEventListener("mouseover", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
        </svg>`
  inviteSpanOut.style.display = "none";
});

//Changes icon to chevron

inviteButton.addEventListener("mouseout", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>`
  inviteSpanOut.style.display = "inline";
});

#invite-btn {
  text-decoration: none;
  font-size: 1rem;
}

#invite-btn button {
  border-radius: 3rem;
  width: 50px;
  height: 50px;
  border: 0;
  background-color: hsla(0, 0%, 10%, 1);
  transition: 0.3s ease-out;
}

#invite-btn button:hover {
  width: 200px;
}

#invite-btn span {
  padding-left: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.3s ease-out;
}

<a id="invite-btn">
  <button>         <!-- Chevron-Icon-->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>
    </button>
  <span id="span-out">INVITE NOW</span>
</a>

CodePudding user response：

Easily countered by using pointer-events: none on the SVG itself. See updated example below.

Good luck!

const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")

inviteButton.addEventListener("mouseover", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
        </svg>`
  inviteSpanOut.style.display = "none";
});

inviteButton.addEventListener("mouseout", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>`
  inviteSpanOut.style.display = "inline";
});

#invite-btn {
  text-decoration: none;
  font-size: 1rem;
}

#invite-btn button {
  border-radius: 3rem;
  width: 50px;
  height: 50px;
  border: 0;
  background-color: hsla(0, 0%, 10%, 1);
  transition: 0.3s ease-out;
}

#invite-btn button svg {
  pointer-events: none;
}

#invite-btn button:hover {
  width: 200px;
}

#invite-btn span {
  padding-left: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.3s ease-out;
}

<a id="invite-btn">
  <button>         <!-- Chevron-Icon-->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>
    </button>
  <span id="span-out">INVITE NOW</span>
</a>

CodePudding user response：

Remove pointer events from the SVG and it seems to work well.

Also, anchors and buttons have distinct purposes and should never be combined.

Finally, use classes for CSS to make it reusable. I didn't fully convert your script for reusability, but it wouldn't be too difficult.

const inviteButton = document.querySelector(".invite-btn");
const inviteSpanOut = document.querySelector(".span-out")

inviteButton.addEventListener("mouseover", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
        </svg>`
  inviteSpanOut.style.display = "none";
});

inviteButton.addEventListener("mouseout", function() {
  inviteButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>`
  inviteSpanOut.style.display = "inline";
});

.invite-btn {
  border-radius: 3rem;
  width: 50px;
  height: 50px;
  border: 0;
  background-color: hsla(0, 0%, 10%, 1);
  transition: 0.3s ease-out;
}

.invite-btn:hover {
  width: 200px;
}

.invite-btn:hover   .span-out {
  padding-left: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.3s ease-out;
}

.invite-btn svg {
  pointer-events: none;
}

<button > 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"  viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg>
</button>

<span >INVITE NOW</span>