onmouseover 관련 질문
본문
css / html 초보입니다.
onmouseover 관련 문의드립니다.
사진 영역안으로 마우스커서가 이동할 경우, 특정 텍스트 영역이 표기되는 자바스크립트를 만들었습니다.
그런데, 특정 텍스트 영역위에 마우스 커서가 이동할 경우
텍스트가 깜빡이는 문제가 발생하고 있습니다.
이를 해결하고 싶은데, 방법이 뭘까요?
###### 소스코드 ########
<meta charset='UTF-8'>
<style type='text/css' media='screen'>
@import url(http://minifin.net/normalize.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
font-family: 'Noto Sans KR', sans-serif;
:lang(ko) {
font-family: 'Noto Sans KR', sans-serif;
}
@import url('http://mom82.godohosting.com/82momx.css')
</style>
<script type='text/javascript'>
function displayx(this_id){
var property=document.getElementById(this_id);
property.style.display = 'block';
}
</script>
<script type='text/javascript'>
function displayn(this_id){
var property=document.getElementById(this_id);
property.style.display = 'none';
}
</script>
<center>
<table width = 800px>
<tr height=277px >
<td width = 33% valign=middle>
<div class = 'questx' id = 'quest1' style = 'display:none;' >
<span class = 'whitney'>❤ 177 <img src='http://82mom.com/ci/comment.png' height=13px> 77 </span>
</div>
</div>
<center>
<img src = 'http://82mom.com/g5/data/file/gallery/thumb-2009155539_6VXBZD9L_9b98c00197abf96821b98694230e56ccaeee54d9_227x257.png' onmouseover = "displayx('quest1')" onmouseout = "displayn('quest1')">
</center>
</div>
</td>
<td width = 33%>
</td>
<td width = 33%>
</td>
</tr>
</table>
</td>
</tr>
</table>
답변 1
특정텍스트로 마우스가 이동할때 이미지에서는 mouseout 이벤트가 발생해서 텍스트가 없어지고
텍스트가 없어지면 이미지에 mouseover 가 발생해서 다시 텍스트가 나타나는 현상일겁니다.
그렇다면 텍스트의 style 에 pointer-events: none; 를 추가해 보세요