CSS непрозрачность при наведении div - PullRequest
Новая
       7

CSS непрозрачность при наведении div

7 голосов
/ 11 февраля 2010

Я новичок в 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;
}

Я хочу увеличить прозрачность div с идентификатором, оставленным при наведении

Ответы [ 3 ]

12 голосов
/ 11 февраля 2010

Боюсь, что зависание элементов 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 */
}
6 голосов
/ 11 февраля 2010

Я не внимательно посмотрел на ваш код, но одна вещь:

Это 

   #left :hover{

скорее всего не то, что вы хотите. Вы хотите 

   #left:hover{

это означает, что элемент с идентификатором left, когда курсор мыши находится над ним. Может быть, это уже помогает решить эту проблему.

0 голосов
/ 26 июня 2012

Если вы хотите прозрачность в старых браузерах, используйте прозрачный .png со светло-серым или любым другим и применяйте его как div поверх другого вашего div. Убедитесь, что вы используете положение: исправлено, так что оно плавает вместе со свитком, иначе при прокрутке вы окажетесь под ним.

...