div悬停时的css不透明度

我是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>

和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的透明度

解决方法

我担心在我们最喜欢的浏览器(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 */
}

div悬停时的css不透明度

解决方法

猜你在找的CSS相关文章