CSS подсказка по проблеме изображения - PullRequest
Новая
       40

CSS подсказка по проблеме изображения

1 голос
/ 11 августа 2011

У меня проблема с подсказкой CSS над изображением.Использование его для текста работает нормально, однако, когда я использую изображение вместо текста, кажется, что возникают проблемы, проблемы немного сложно объяснить, поэтому я просто дам вам ссылку: http://zorps.dk/css-tooltips/tooltip.html

Код CSS: 

.tooltip {
        border-bottom: 1px dotted #000000; color: #000000; outline: none;
        cursor: help; text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
    }
    .tooltip:hover img {
        border: 0; margin: -10px 0 0 -55px;
        float: left; position: absolute;
    }
    .tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
    }
    .classic { padding: 0.8em 1em; }
    * html a:hover { background: transparent; }
    .classic {background: #FFFFAA; border: 1px solid #FFAD33; }

HTML-код: 

<p>     <a class="tooltip" href="#"> <img src="icon_question.png" /> <span class="classic">The tooltip text goes here!</span></a></p>

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

Примечание: код взят из: http://sixrevisions.com/css/css-only-tooltips/

Ответы [ 2 ]

4 голосов
/ 11 августа 2011

Это код в классе .tooltip: hover img - если вы удалите его, он будет работать хорошо:

http://jsfiddle.net/RyRRM/

1 голос
/ 11 августа 2011

это, вероятно, потому, что событие вызвано родителем подсказки, не являющимся текстовым узлом. Когда вы наводите курсор мыши на изображение, оно обнаруживает событие отключения мыши для родителя. Вы можете попробовать сделать изображение css-фоном и установить ширину элемента вместо встраивания <img>

Ваша разметка может быть 

<a class="tooltip image" href="#"><span class="classic">The tooltip text goes here!</span></a>

и ваш css будет 

.tooltip.image {
    width: 12px;
    height: 14px;
    background-image: url("./icon_question.png");
    display: block;
    background-repeat: no-repeat;
}
...