CSS div悬停时的css不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2244566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css opacity on hover of div
提问by rajanikant
I am new to CSS. I just want a div over another div on hover and its transparency should increase. I have done some thing like that
我是 CSS 新手。我只想在悬停时将 div 放在另一个 div 上，并且它的透明度应该增加。我做过类似的事情
<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>
and css file is
和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;
}
I want to increase transparency of div with id left on hover
我想在悬停时增加 id 的透明度
回答by Rowan
I'm afraid hovering of divelements is not supported in our favourite browser (IE6), but if you're willing to drop support, the following code should work:
恐怕div我们最喜欢的浏览器 (IE6) 不支持悬停元素，但如果您愿意放弃支持，以下代码应该可以工作：
#left {
opacity: 0.6; /* css standard */
filter: alpha(opacity=60); /* internet explorer */
}
#left:hover {
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
回答by Pekka
I haven't looked closely at your code but one thing:
我没有仔细看过你的代码，但有一件事：
This
这个
#left :hover{
is most likely not what you want. You want
很可能不是你想要的。你要
#left:hover{
it means, the element with the ID leftwhen the mouse hovers over it.
Maybe that already helps solve it.
这意味着，left当鼠标悬停在它上面时带有 ID 的元素。也许这已经有助于解决它。
回答by Cliseru Gabriel
If you want transparency on old browsers use a transparent .png with a light grey or whatever and apply it as a div on top of your other div. Make sure you use position:fixed so it floats together with the scroll, else as you scroll you end up underneath it.
如果您想在旧浏览器上透明，请使用带有浅灰色或其他颜色的透明 .png 并将其作为 div 应用到其他 div 之上。确保使用 position:fixed 使其与滚动条一起浮动，否则滚动时最终会在滚动条下方。
