Question

我是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左侧增加div的透明度

Answer 1

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

Answer 2

我没有密切关注你的代码，只有一件事：

此

   #left :hover{

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

   #left:hover{

表示鼠标悬停在其上时标识为left的元素。也许这已经有助于解决它。

Answer 3

如果您希望旧浏览器具有透明度，请使用带有浅灰色或其他任何内容的透明.png，并将其作为div应用于其他div之上。确保你使用的位置是固定的，所以它与滚动一起浮动，否则当你滚动时最终会在它下面。

div悬停时的css不透明度

3 个答案: