Блог

Главная - Вопросы по программированию - Наведение курсора CSS после прекращения работы с изображениями?

Наведение курсора CSS после прекращения работы с изображениями?

#css #hover #pseudo-element

#css #наведение курсора #псевдо-элемент

Вопрос:

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

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

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

Комментарии:

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

Ответ №1:

Это работает, если вы обернете его в 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 .

Ответ №2:

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

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

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

Ответ №3:

:after amp; :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/