SVG mouseenter glitch

Question

I'm using a SVG circle and I want a <text> tag with a <a> inside of it to display every time I mouseenter the SVG circle. But I get a glitch whenever I hover over the <text> tag and it doesn't even let me to click on the link.

var buttonCircle = document.querySelector('.circle-four');
var link = document.querySelector('.showLink')



function animateButton(scale, duration, elasticity) {
    anime.remove(buttonCircle);
    anime({
        targets: buttonCircle,
        scale: scale,
        duration: duration,
        elasticity: elasticity
    });
}


function enterButton(){
    animateButton(3, 800, 400) 
    link.classList.add('work')
}
function leaveButton(){
    animateButton(1, 600, 300)
    link.classList.remove('work')
}

buttonCircle.addEventListener('mouseenter',
enterButton, false);
buttonCircle.addEventListener('mouseleave', leaveButton, false)

.circle-four{fill:#EAEAEA}
.circle-four {
  cursor: pointer;
}


.work {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg x="0px" y="0px" viewBox="0 0 792 612">
  <g>
    <circle class="circle-four el" cx="37.162" cy="37.162" r="37.162">         </circle>
    <text class="showLink" x="100" y="85" font-family="Verdana" font-size="15" display="none">
            <a href="https://stackoverflow.com/" target="_blank">Projects</a>
    </text>
  </g>

</svg>

score 0 · Answer 1 · answered Oct 03 '17 at 21:02

I think the thing is that the mouse leaves the big circle as soon as it hovers over the text. You could solve this by adding the event of making the big circle to the project text also.

var buttonCircle = document.querySelector('.circle-four');
var link = document.querySelector('.showLink')

 var myprojectsa=document.querySelector('#myprojects')

function animateButton(scale, duration, elasticity) {
    anime.remove(buttonCircle);
    anime({
        targets: buttonCircle,
        scale: scale,
        duration: duration,
        elasticity: elasticity
    });
}


function enterButton(){
    animateButton(3, 800, 400) 
    link.classList.add('work')
}
function leaveButton(){
    animateButton(1, 600, 300)
    link.classList.remove('work')
}

buttonCircle.addEventListener('mouseenter',
enterButton, false);
myprojectsa.addEventListener('mouseenter',
enterButton, false);
buttonCircle.addEventListener('mouseleave', leaveButton, false)

.circle-four{fill:#EAEAEA}
.circle-four {
  cursor: pointer;
}


.work {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg x="0px" y="0px" viewBox="0 0 792 612">
  <g>
    <circle class="circle-four el" cx="37.162" cy="37.162" r="37.162"></circle>                 <text class="showLink" x="100" y="85" font-family="Verdana" font-size="15" display="none">
            <a href="https://stackoverflow.com/" target="_blank" id="myprojects">Projects</a>

    </text>
  </g>

</svg>

SVG mouseenter glitch

1 Answers1