CSS зависает после того, как не работает с изображениями? - PullRequest
Новая
       43

CSS зависает после того, как не работает с изображениями?

3 голосов
/ 14 октября 2011

Я сделал скрипку: http://jsfiddle.net/ATdRD/

Кто-нибудь может это исправить или определить, почему это не работает ??

Когда пользователь наводит курсор на изображение, которое я хотел быотображаемый заголовок данных, для которого я могу использовать стиль всплывающей подсказки

Ответы [ 3 ]

2 голосов
/ 14 октября 2011

Работает, если обернуть его в тег p и задать ему некоторое позиционирование: 

<p class="kudoIcon" data-title="Admin">
    <img src="http://www.google.co.uk/images/srpr/logo3w.png" alt="Wapple" />
</p>

CSS 

.kudoIcon {
    position: relative;
}

.kudoIcon:hover:after{
    content: attr(data-title);
    position: absolute;
    top:100px;          /*ADDED*/
    left:100px;         /*ADDED*/
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
    z-index: 1000;
}

Пример: http://jsfiddle.net/ATdRD/2/

Семантически, вероятно, было бы лучше поместить его внутри тега div или figure, как упоминалось @BoltClock.

1 голос
/ 14 октября 2011

Оказывается, что :after для тега <img> просто не поддерживается большинством браузеров.(по-видимому, поддерживается Opera, но не намного)

Лучшее решение, которое я могу вам предложить, - это либо обернуть ваш <img> в <div> или аналогичный, и поставить на него :afterили полностью отказаться от тега <img> и использовать вместо него background-image.

Я нашел этот сайт - http://lildude.co.uk/after-css-property-for-img-tag - который также может вам помочь.

0 голосов
/ 14 октября 2011

:after & :before не работают на replaced таких элементах, как img, input, button

отметьте это http://reference.sitepoint.com/css/replacedelements

Итак, вы должны определить non-replace элемент перед img пометить как 

<a href="">
    <img src="image" alt="Wapple" />
</a>

http://sixrevisions.com/css/snazzy-hover-effects-using-css/

...