Наложение прозрачного изображения при наведении курсора CSS - PullRequest
Новая
       6

Наложение прозрачного изображения при наведении курсора CSS

3 голосов
/ 13 апреля 2011

Я пытаюсь наложить прозрачное изображение при наведении курсора на CSS.

Здесь есть ответ , но он не работает в IE7 или IE8. Кто-нибудь знает, как это сделать?

Я пытаюсь держать супер-свет, поэтому не хочу использовать js или что-то подобное.

Спасибо

Ответы [ 3 ]

12 голосов
/ 13 апреля 2011

Я проверил вашу ссылку и предложил это решение на основе этого.

HTML: 

<div class="image">
    <img src="xy.jpg" alt="" />
    <img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>

CSS: 

.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }

Должен работать во всех браузерах, включая IE8 и IE7.Он не будет работать в IE6, потому что он позволяет: зависать только над некоторыми элементами, такими как ссылки (<a>).Если вы хотите поддерживать IE6, измените .image на <a> вместо <div> и присвойте ему display: block;.

1 голос
/ 29 марта 2013

Это все еще не работает в IE7 / 8 AFAIK, поэтому я боюсь, что это не ответит на вопрос.

Тем не менее, я оказался на этой странице, когда забыл, как сделать это, используя современные методы, поэтому я помещаю ответ здесь для справки.

Я смог сделать это только поместив img в div контейнера / оболочки, так как img элементы не будут принимать псевдо-классы, такие как :after. 

<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>

Затем CSS оформляется для предоставления псевдоэлемента при наведении. 

.container {
    position: relative;
}
.container:hover:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}

См. Пример здесь

0 голосов
/ 13 апреля 2011

Обычно мы воссоздаем изображение, которое должно иметь прозрачное наложение в формате .png. .Jpeg - это формат плоских изображений, который не поддерживает прозрачность.

следующий шаг, который мы предпринимаем, - это что-то вроде этого: 

<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
   <div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
     ...
   </div>
</div>

Это самое близкое к тому, как я мог понять твой вопрос

...