SVG mouseenter 故障答案

【问题标题】：SVG mouseenter glitchSVG mouseenter 故障
【发布时间】：2017-10-03 20:15:54
【问题描述】：

我正在使用 SVG 圆圈，并且我希望在每次 mouseenter SVG 圆圈时显示一个带有 <a> 的 <text> 标签。但是每当我将鼠标悬停在<text> 标签上时，我都会遇到一个小故障，它甚至不允许我点击链接。

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>

【问题讨论】：

标签： javascript jquery css svg anime.js

【解决方案1】：

我认为问题在于鼠标一悬停在文本上就会离开大圆圈。您也可以通过在项目文本中添加制作大圆圈的事件来解决此问题。

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>

【讨论】：