重疊的CSS div

-1

嘿，我有一個圖像是一半淡出，當你將它懸停在它上面，它會淡入屏幕。我也有一個盒子，當你將鼠標懸停在它上面時，它會改變顏色。然而，問題是如果我讓盒子繞過圖像，唯一可行的是盒子正在改變顏色，所以它與其他圖像重疊。有任何解決這個問題的方法嗎？重疊的CSS div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng"> 
<head> 

<style> 
.meh 
{ 
    position: relative; 
    opacity:0.5; 
    filter:alpha(opacity=40); 
    width: 200px; 
    height: 200px; 
    top: -550px; 
    left: 740px; 

} 

.meh:hover 
{ 
    opacity:1.2; 
    filter:alpha(opacity=100); 
} 

.border 
{ 
    position: relative; 
    height: 200px; 
     width: 200px; 
     border: 1px solid black; 
     text-align:center; 
    top: -650px; 
} 

.border:hover 
{ 
    border: 1px solid green; 
} 
    </style> 


</head> 
<body> 

<div class="meh"> 
     <img src="http://lorempixel.com/50/50" alt="meh"> 
</div> 


<div class="border">  
</div> 

</body> 
</html>

來源

2012-12-03 TheEagle

你能做出的jsfiddle給我們一個更清晰的例子嗎？我將你的代碼複製到一個，並且似乎沒有問題 – Michelle

爲什麼有top：-550px;值給予？

我在這裏刪除了這些值。

方法 - 1（以獲得整個的div懸停效果）

.meh 
{ 
    position: relative; 
    opacity:0.5; 
    filter:alpha(opacity=40); 
    width: 200px; 
    height: 200px; 
} 
.meh:hover 
{ 
    opacity:1.2; 
    filter:alpha(opacity=100); 
} 
.border 
{ 
    position: relative; 
    height: 200px; 
     width: 200px; 
     border: 1px solid black; 
     text-align:center;  
} 
.border:hover 
{ 
    border: 1px solid red; 
}

DEMO

方法 - 2（爲了給兩個單獨的懸停效果div）

只需添加顯示：內聯到.meh

.meh 
{ 
    position: relative; 
    opacity:0.5; 
    filter:alpha(opacity=40); 
    width: 200px; 
    height: 200px; display:inline 
}

DEMO

來源

2012-12-03 07:01:27 Sowmya

非常感謝你的幫助 – TheEagle

讓我試試......

<style> 
    .meh 
    { 
     z-index: 500; 
     width: 200px; 
     height: 200px; 
     text-align: center; 
    } 
    .meh img { 
     margin-top: 50px; 
     opacity:0.5; 
     filter:alpha(opacity=40); 
    } 
    .meh img:hover { 
     opacity:1.2; 
     filter:alpha(opacity=100); 
    } 
    .border { 
     z-index: -1; 
     background: transparent; 
     position: absolute; 
     top: 0; 
     height: 200px; 
       width: 200px; 
     border: 1px solid black; 
    } 

    .border:hover{ 
     border: 1px solid green; 
    } 
     </style>

我不知道這是不是你想達到的風格。我改變了你的CSS，因爲你的方法是在元素圖像和div.box上執行「：hover」選擇器。我還沒有真正嘗試在同一時間在css兩個盤旋中執行。如果你願意，我建議你在jquery或javascript上做。

你可以試試這個，並評論你的CSS。

來源

2012-12-03 02:39:17

對不起，這dosent工作。但謝謝你嘗試 – TheEagle

回答

相關問題