Div Мерцание при наведении мыши, при наведении мыши

У меня есть изображение, и я хочу, чтобы при наведении курсора на него был 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;">1</div>
<img alt="ברק לוי" src="" style="background-color:red; height:163px; width:136px" onmouseover="picture(true)" onmouseout="picture(false)"/>

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

jsBin Как решить эту проблему?


javascript html onmouseover onmouseout
person ofir2471    schedule 14.04.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Потому что вам нужно использовать событие onmouseout на 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)"/>
person Batu.Khan    schedule 14.04.2014

arrow_upward
2
arrow_downward

Просто добавьте onmouseover="picture(true)" onmouseout="picture(false) в свой div div.

person Iansen    schedule 14.04.2014

arrow_upward
0
arrow_downward 

<!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";
    }
}

Попробуй это. Мерцание связано с тем, что при установке "Display: none" его нет, и срабатывает "mouseout". При установке непрозрачности на 0,0 он по-прежнему остается невидимым, но отключение мыши не срабатывает.

person user3333091    schedule 14.04.2014