使用鼠標和鼠標時閃爍

我想創建一個效果，當鼠標移動到圖像上時，它應該在圖像上顯示一個半透明的黑框並在頂部顯示一些細節。這些div包含圖像，問題是這個mouseover和mouseout事件正在創建頂部添加的黑色半透明div的閃爍。使用鼠標和鼠標時閃爍

下面是代碼，

function addfocus(elem) 
{ 
    // getting dimensions of current div. 
    var currelem = document.getElementById(elem); 
    var left = currelem.offsetLeft; 
    var top = currelem.offsetTop; 
    var w = currelem.offsetWidth; 
    var h = currelem.offsetHeight; 

    // create a new div to match up these dimensions. 
    var ddiv = document.createElement("div"); 
    ddiv.style.position = "absolute"; 
    ddiv.style.top = top + "px"; 
    ddiv.style.left = left + "px"; 
    ddiv.style.width = w + "px"; 
    ddiv.style.height = h + "px"; 

    ddiv.style.backgroundColor= "rgba(0,0,0,0.5)"; 

    document.body.appendChild(ddiv); 
} 

function rmvfoucs(elem) 
{ 
    document.body.removeChild(document.getElementById(elem)); 
}

當只有在div文本，閃爍不可見。只有當圖像包含在div中時，才能看到閃爍。

如果您有任何解決方法，請幫助。

謝謝。

來源

2014-01-07 Sameeksha Kumari

您的問題是，當您添加疊加層時，會導致刪除疊加層的mouseout事件。所以，當你移動鼠標時，你會不斷地添加和刪除疊加層。

但我不確定爲什麼你這樣使用Javascript。它可以在CSS中完成，使用：hover。

<div class="item"> 
    <div class="info">...</div> 
    <img src="..." /> 
</div>

顯示懸停

.info { 
    display:none; 
} 
.item:hover .info { 
    display:block; 
}

您的覆蓋見例子：我使用的JavaScript，因爲我已經在我的項目很多動態創建的元素，懸停在他們，我想要這個效果http://jsfiddle.net/jj8X6/

來源

2014-01-07 11:34:00

。對不起，因爲我沒有提到它。我會嘗試你的技術。 –

我明白我現在可以如何整合它。 –

使用鼠標和鼠標時閃爍

回答

相關問題