Question

请帮助我，我的按钮有提示，但是当我从链接中取鼠标时，提示不会消失。

请帮助我解决这个问题。感谢

Css：

.photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
}

.photo:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 100%; top: -50%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
}

HTML：

<div class="photo" data-title="Remove"><a href="javascript:PopUpShow4({{ item.id }})"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17" ></a></div>

P.S。当我从链接中取下鼠标并在提示中引用时不会消失。当我在提示中使用鼠标时，提示必须消失。仅在按钮或图像中显示鼠标时显示

Answer 1

将工具提示放在远离链接的位置，这样当您尝试将鼠标悬停在工具提示内容上时，它将超出范围并将消失。

像

left: 200%; top: -50%; /* Положение подсказки */

http://jsfiddle.net/JEa3Q/2/（根据您的需要调整）

顺便提一下，我建议使用工具提示的jQuery插件，它有这些可配置的选项。

Answer 2

当您悬停时，after伪元素将可见。为避免这种情况，请在元素上声明:after规则，并在:hover状态下，将其设置为display：block。

提示HTML CSS的问题

2 个答案: