SVG 鼠标输入故障

Question

我正在使用SVG圆圈，我希望每次mouseenterSVG圆圈时都会显示一个带有<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>

Answer 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>