Firefoxでonmouseoutイベントが機能しない

Chromeで学生のUI要素にマウスを置くと、情報が表示される（つまりonmouseout）、他のブラウザで同じことをするとFirefoxは動作していませんか？Firefoxでonmouseoutイベントが機能しない

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.0 
 
} 
 

 
.näytä { 
 
    opacity: 0.4; 
 
} 
 

 
.näytä:hover { 
 
    opacity: 0.9;  
 
} 
 

 
circle{ 
 
\t position: absolute; 
 
    z-index: 1; 
 
}

\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
<h1>oppilas</h1> 
 
<div id="app" class="container-fluid" style="padding:20px"> 
 
    <div class="row"> 
 

 
</div> 
 
<div id="queue"> 
 
<svg class="näytä" v-for="student in filteredStudentData" width="130" height="130" :key="student.custom_fields[0].value"> 
 
    <circle v-bind:r=student.custom_fields[0].value/4 :cx=student.custom_fields[0].value/4+5 :cy=student.custom_fields[0].value/4+5 stroke="black" stroke-width="4" fill="purple" onmouseenter='alert(\"hello\")'/> 
 
\t <text x="50%" y="50%" stroke="black" stroke-width="1px" dy=".3em" text-anchor="middle" alignment-baseline="middle">{{student.lastname}}</text> 
 
\t <rect id="rec1" onmouseout='this.style.visibility = "hidden"'> 
 
\t <title>{{student.lastname}}&nbsp;{{student.firstname}}&nbsp;{{student.custom_fields[0].value}}&nbsp;{{student.custom_fields[1].value}}&nbsp;{{student.custom_fields[2].value}}</title> 
 
\t </rect> 
 
</svg> 
 
</div> 
 

 
<script src="vue.min.jss" type="text/javascript"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
 
<script src="student.js" type="text/javascript"></script> 
 
</body> 
 
</html>

出典

2017-12-15 Joonas Karppinen

もドキュメントを読んでいない 'onmouseenter' mouseenter' @使用'最初https://vuejs.org/v2/guide/events.html – samayo

誰かがこの問題を助けることはできますか？ –

質問を更新してより明確にする – samayo

-1

mouseleaveお試しください！

$('#yourID').on('mouseleave', 'a', function(event) { 


});

出典

2017-12-15 14:20:52

コードを変更してここに送信できますか？ –

-1

TRY IT！ HTML：

<svg class="näytä nayta" v-for="student in filteredStudentData" width="130" height="130" :key="student.custom_fields[0].value"> 
    <circle v-bind:r=student.custom_fields[0].value/4 :cx=student.custom_fields[0].value/4+5 :cy=student.custom_fields[0].value/4+5 stroke="black" stroke-width="4" fill="purple" onmouseenter='alert(\"hello\")'/> 
    <text x="50%" y="50%" stroke="black" stroke-width="1px" dy=".3em" text-anchor="middle" alignment-baseline="middle">{{student.lastname}}</text> 
    <rect id="rec1" onmouseout='this.style.visibility = "hidden"'> 
    <title>{{student.lastname}}&nbsp;{{student.firstname}}&nbsp;{{student.custom_fields[0].value}}&nbsp;{{student.custom_fields[1].value}}&nbsp;{{student.custom_fields[2].value}}</title> 
    </rect> 
</svg>

JSフッターページに追加！

<script> 
$(document).ready(function() { 

$('.nayta').on('mouseleave', 'a', function(event) { 
alert('mouse leave'); 
}); 

$('.nayta').on('mouseenter', 'a', function(event) { 
alert('mouse enter'); 
}); 

}); 


</script>

出典

2017-12-15 14:27:36

は機能していないため、生徒を表示していません –

Firefoxでonmouseoutイベントが機能しない

答えて

関連する問題