悬停的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的透明度留在悬停

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

我可以看到你并不擅长英语，但如果你可以运行拼写检查，它肯定会有所帮助。我不是语法纳粹，但是作为读者，通过正确的文字可以轻松浏览，并且有机会让你更加认真对待！
只是一个良好的意见 – questzen 2010-02-11 13:14:12

答

我没有在你的代码仔细看但有一两件事：

这

#left :hover{

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

#left:hover{

这意味着，当鼠标悬停在它上面的ID为left的元素。也许这已经有助于解决它。

，但不工作#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 */ 
}

你需要看看如何通过应用一个类悬停在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。确保你使用的位置：固定，因此它与滚动一起浮动，否则当你滚动到最下面时。

悬停的CSS上的不透明度

相关推荐