Как добавить изображение и изменить видимость при наведении CSS - PullRequest
Новая
       27

Как добавить изображение и изменить видимость при наведении CSS

0 голосов
/ 14 марта 2012

Я пытаюсь сделать что-то полу сложное.У меня есть 4 связанных изображения.при наведении курсора на изображение я хочу изменить непрозрачность до 0,7.Я также хочу, чтобы лента появлялась при наведении на изображение.Вот код, который я использую 

<div id="tracks-content">
    <div class="track enrolled">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track1.png" /></span></a>
       <h3>Track title 1</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
    </div>
    <div class="track unavailable">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track2.png" /></span></a>
       <h3>Track title 2</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
   </div>
</div>

Так что, если я наведу курсор на изображение, скажем, track1.png, то я хочу, чтобы track1.png уменьшился до 70%, и я хочу, чтобы видимость для ribbon.png измениласьот скрытого к видимому.Я продолжаю сталкиваться с проблемой, когда непрозрачность изображения также применяется к ленте.На изображении, которое вы можете увидеть, когда я наведу 1-ое изображение, лента появляется, но также получает непрозрачность.см. ссылку для изображения http://img.photobucket.com/albums/v513/Tearyguitarist/example.png

Вот CSS Я использую 

#tracks-content .enrolled a:hover > .ribbon{
    visiblity:visible;
}
#tracks-content .enrolled a:hover span img{
    outline: solid 1px #40a304;
    opacity:0.5;
}

Есть предложения?Я не могу использовать абсолютные позиции, поскольку вся страница управляется php и может содержать 1 или 10 дорожек, поэтому контент должен быть динамичным и многократно использоваться.

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Я не могу воссоздать проблему, , поскольку в этой демонстрации она работает нормально (примечание: непрозрачность была изменена, чтобы сделать ее более очевидной). Однако следует отметить несколько вещей, которые могут вызывать проблемы.

1) Наиболее вероятная проблема заключается в том, что недопустимый html имеет тег div в теге a (элемент уровня блока внутри строки), поэтому некоторые браузеры могут иметь проблемы с этим и работать неправильно.

2) Если ваш css выше отражает ваш истинный css, то вы допустили ошибку visibility ("visiblity") в установке ribbon в visible.

3) Вы убедились, что сам ribbon.png не имеет своей собственной непрозрачности (поскольку это png, у него может быть непрозрачность в самом изображении).

0 голосов
/ 14 марта 2014

Удалите свой код и попробуйте границу с некоторыми отступами вместо использования структуры

Используйте стиль ниже:

#tracks-content .enrolled a:hover span img{
    border: solid 1px #40a304;
    padding:1em;
    opacity:0.5;
    *filter: alpha(opacity=50);
}
...