懸停的CSS上的不透明度

我是新來的CSS。我只想在div上懸停另一個div，其透明度應該增加。我做了一些事情一樣，懸停的CSS上的不透明度

<div id="maincontainer"> 
<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div> 
<h1>A floating image</h1> 
<p id="bill"></p> 
<div id="mem">sfasdf</div> 
</div> 
<div id="column1"> 
<p>Haec disserens qua de re agatur et in quo causa consistat non 
videt...</p> 
</div> 
<div id="column2"> 
<p>causas naturales et antecedentes, idciro etiam nostrarum 
voluntatum...</p> 
</div> 
<div id="column3"> 
<p>nam nihil esset in nostra potestate si res ita se haberet...</p> 
</div> 
<div id="slide"> 
<ul> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
    <li id="sp"></li> 
    <li id="ims"><img src="test.jpg" height="200" width="200" /></li> 
</ul> 
</div> 
<div id="left">l</div> 
<div id="right">R</div>

和CSS文件

body { 
    background-color: #FFCC66; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: 50% 100%; 
    margin-top: 100px; 
    margin-right: 40px; 
    margin-bottom: 100px; 
    margin-left: 70px; 
} 

#picture { 
    height: 200px; 
    width: 170px; 
    float: left; 
} 

#column1 { 
    float: left; 
    width: 33%; 
} 

#column2 { 
    float: left; 
    width: 33%; 
} 

#column3 { 
    float: left; 
    width: 33%; 
} 

#bill { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    letter-spacing: 2px; 
    text-align: justify; 
    line-height: 20px; 
} 

#mem { 
    position: absolute; 
    top: 300px; 
    left: 150px; 
} 

#slide { 
    overflow: hidden; 
    position: absolute; 
    height: 220px; 
    width: 300px; 
    top: 500px; 
    left: 400px; 
    background-color: #333399; 
    z-index: 1; 
} 

#left { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #FF33CC; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    vertical-align: middle; 
    opacity: .5; 
} 

#left :hover { 
    position: absolute; 
    top: 500px; 
    left: 400px; 
    height: 220px; 
    width: 30px; 
    background-color: #CCCC00; 
    z-index: 2; 
    text-align: center; 
    color: #000000; 
    filter: alpha(opacity = 10); 
    -moz-opacity: 10; 
    -khtml-opacity: 10; 
    opacity: 10; 
    cursor: pointer; 
}

我想增加與ID的div的透明度留在懸停

來源

2010-02-11 rajanikant

謝謝@BalusC！ – 2010-02-11 13:13:26

我可以看到你並不擅長英語，但如果你可以運行拼寫檢查，它肯定會有所幫助。我不是語法納粹，但是作爲讀者，通過正確的文字可以輕鬆瀏覽，並且有機會讓你更加認真對待！
只是一個良好的意見 – questzen 2010-02-11 13:14:12

我沒有在你的代碼仔細看但有一兩件事：

這

#left :hover{

很可能不是你想要的。你想要

#left:hover{

這意味着，當鼠標懸停在它上面的ID爲left的元素。也許這已經有助於解決它。

來源

2010-02-11 13:10:31

，但不工作#left：懸停{ – rajanikant 2010-02-11 13:11:45

我在我們最喜歡的瀏覽器（IE6）不支持div元素的害怕徘徊，但如果你願意放棄的支持，下面的代碼應該工作：

#left { 
    opacity: 0.6; /* css standard */ 
    filter: alpha(opacity=60); /* internet explorer */ 
} 

#left:hover { 
    opacity: 1; /* css standard */ 
    filter: alpha(opacity=100); /* internet explorer */ 
}

來源

2010-02-11 13:37:51 Rowan

你需要看看如何通過應用一個類懸停在IE6中的suckerfish下拉工作。 IE6只喜歡：懸停在錨點元素上。 – dylanfm 2010-02-11 13:53:21

不要忘記-webkit-opacity和-khtml-opacity。 – 2010-02-11 14:01:52

+1 @Marcel關注細節。儘管如此，我仍試圖保持簡短而甜蜜。另外@dylanfm我沒有觸及IE6的：盤旋問題，也許更簡單的解決方案是使用As而不是DIV。這取決於DIV的內容。 – Rowan 2010-02-11 14:15:22

如果你想透明度在舊的瀏覽器上使用淺灰色或其他任何形式的透明.png，並將其作爲div應用於其他div。確保你使用的位置：固定，因此它與滾動一起浮動，否則當你滾動到最下面時。

來源

2012-06-25 21:29:18

懸停的CSS上的不透明度

回答

相關問題