2014-04-14 1 views
1

나는 이미지를 가지고 있으며 마우스를 끝낼 때 div를 원하지만 onmouseout을 원하지 않습니다. 코드를 작성했는데 작동하지만 깜박입니다. 사업부 깜박임 onmouseover, onmouseout


function picture(bool) { 
    if (bool) { 
     document.getElementById("div").style.display = "block"; 
    } 
    else if (bool==false) { 
     document.getElementById("div").style.display = "none"; 
    } 
} 

jsBin

<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:none;">1</div> 
<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)" onmouseout="picture(false)"/> 
내가 그것을 어떻게 해결할 수 있습니다 : 여기 코드인가?

답변

0

당신은 div

<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:none;" onmouseout="picture(false)">1</div> 

<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)"/> 
2

div div에 onmouseover="picture(true)" onmouseout="picture(false)을 추가하기 만하면됩니다. 이 시도

0
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div id="div" style="opacity:0.6; background-color:#2c3e50; width:136px; height:163px; z-index:199; position:absolute; vertical-align:top; font-size:120px; text-align:center; color:White; display:block;" onmouseover="picture(true)" onmouseout="picture(false)">1 
<img alt="" src="http://i.imgur.com/vbKNWRZ.gif" id="image"/></div> 
</body> 
</html> 


function picture(bool) { 
    if (bool) { 
     document.getElementById("div").style.opacity = "0.6"; 
    } 
    else { 
     document.getElementById("div").style.opacity = "0.0"; 
    } 
} 

onmouseout 이벤트를 사용할 필요가 있기 때문에. 깜박 거리는 것은 "Display : none"을 설정하면 표시되지 않으며 "mouseout"이 트리거된다는 사실 때문입니다. 불투명도를 0.0으로 설정하는 동안 보이지 않는 상태로 남아 있지만 마우스 아웃은 트리거되지 않습니다.

관련 문제