顯示和隱藏一個div元素，並在CSS

改變混濁我有這個標記：顯示和隱藏一個div元素，並在CSS

<div class="contact-item" 
    onmouseover="div_ContactItem_mouseover(this)"> 
</div> 

<div id="div_ItemOver" 
style="display: none;" 
class="contact-item-hover" 
onmouseout="div_ItemOver_mouseout(this)"> 

<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
</div>

而這些JavaScript語句：

function div_ContactItem_mouseover(e) { 
$("#div_ItemOver").show().offset($(e).offset()); 
}; 

function div_ItemOver_mouseout(e) {   
$("#div_ItemOver").hide(); 
};

這些CSS規則：

.contact-item, .contact-item-hover { 

cursor: pointer; 
display: inline-block; 
border-radius: 5px; 
margin: 0px 3px 3px 0px; 
width: 340px; 
height: 90px; 
border: 1px solid #244f56; 
background-color: #f8f8f8; 
} 

.contact-item-hover { 

background-color: #000000; 
position: absolute; 
opacity:0.12; 
filter:alpha(opacity=12); 
}

我想要的：

我需要出示第二div ID爲div_ItemOver每當鼠標在具有contact-item CSS類第一div，在第一個div，除了div_ItemOver有cssopacity等於0.12。

的問題是什麼：

我對div_ItemOverlinks，每當我對這些鏈接時，一個mouseout和mouseover發生，這是造成類似元件上的閃爍，爲什麼？我怎樣才能消除這個閃爍？
我不想opacity 0.12反映links這是第二個div，這裏面，我有哪些設置其不透明度爲1這些鏈接一個內嵌式的，但它不工作。我怎樣才能顯示這些鏈接沒有不透明，並完全清楚？

這是我的jsfiddle：http://jsfiddle.net/am1r_5h/1zrytzjw/2/

要看到這個問題，你需要把鼠標放在矩形，然後移動到鏈接上左上角

來源

2014-09-25 Amir Sherafatian

如果您分配同樣的處理既div的你閃爍消失：

http://jsfiddle.net/1zrytzjw/4/

<div id="div_ItemOver" style="display: none;" class="contact-item-hover" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"> 
... 
</div> 

<div class="contact-item" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"></div>

如果將console.logs添加到原始提琴中，您會看到每次將鼠標懸停在導致閃爍的鏈接上時，實際上都會收到鼠標移出事件。

來源

2014-09-25 16:01:38

1）我不會深入細節，但是這必須做到如何觸發子元素時發生事件窒息，它也會自動對父項產生影響。您可以通過將e.stopPropagation();添加到div_ItemOver_mouseout()的開頭來解決閃爍問題。因此，它應該是這樣的：

function div_ItemOver_mouseout(e) {   
    e.stopPropagation(); 
    $("#div_ItemOver").hide(); 
};

2）你的第二個問題，它是一個可能性，你弄死不透明/過濾器設置，而是嘗試background-color: rgba(R, G, B, A);格式？這樣一來，如果你改變了以下更改CSS，那麼你的元素看起來，你希望他們：

.contact-item-hover { 
    background-color:rgba(240, 240, 240, 0.25); 
    position: absolute; 
} 

.contact-item-hover > div{ 
    background-color:rgba(240, 240, 240, 0.85); 
    width:50px; 
    height:20px; 
    color:red; 
}

的.contact-item-hover > div實際上引用您的鏈接，所以您不必到內聯樣式添加到你有每一個環節。

來源

2014-09-25 16:03:50 Gabor

你可以簡單地通過將隱藏的div放入第一個div來解決這個問題。所以只需將第一個div的結束div標記移動到底部即可。

我認爲它閃爍的原因是因爲當它擊中那些「鏈接」divs時，鼠標懸停狀態被破壞，隱藏了div與你的鏈接，但因爲你的鼠標仍然存在，它立即被淹沒在第一個div，因此再次顯示鏈接。將隱藏的div放在裏面使得鏈接成爲div的一部分，並且鼠標懸停與它關聯，所以mouseover現在包含鏈接。我希望這是有道理的。

來源

2014-09-25 16:15:40

1）我用jQuery .hover（）取代了你的Javascript mouseover/mouseout函數，它使用mouseon和mouseout參數http://api.jquery.com/hover/。閃爍不再存在。

2）我不確定何時需要什麼級別的不透明度，但是您可以在mouseon和mouseout的.css（）事件以及初始不透明度的CSS樣式中更改它。

$("#div_ItemOver").css({"opacity":"1"})

我引用#div_ItemOver在懸停事件，這樣當你將鼠標懸停在該部分以及透明度的變化保持。

$(".contact-item, #div_ItemOver").hover()

一些額外的變化：

我把你的造型到CSS，你用在多個地方
我使用時的位置相同的風格和浮動，讓您的鏈接出現在非接觸項目DIV

這裏的的jsfiddle http://jsfiddle.net/1zrytzjw/8/

來源

2014-09-25 16:26:34

此問題可以通過將mouseover和mouseout處理程序都添加到div s來解決。
第二個可以通過將background: rgba(0, 0, 0, 0.12);代替background-color: #000000;和opacity:0.12;

http://jsfiddle.net/1zrytzjw/10/

來源

2014-11-15 10:44:20

ü正確的，但我不喜歡用'rgba'背景格式，支持舊的瀏覽器，也可以解決我在顯示和隱藏元素停止閃爍之前在處理程序中檢查了鼠標指針偏移量，謝謝... – 2014-11-15 12:38:13

顯示和隱藏一個div元素，並在CSS

回答

相關問題