Всем приветы и ответы!
И сегодня у нас интересное решение в нашу коллекцию сайта!
Мы будем создавать тёмные появившиеся подсказки, которые появятся при наведении на текст стрелкой мыши, благодаря HTML-CSS и никакого JS!
Давайте начнём!
HTML код
Для начала на страницу сайта необходимо прописать определённый код с текстом подсказки:
<dfn data-info="Текст подсказки!">текст на страницы сайта</dfn>
CSS стили
А теперь собственно говоря стили, которые надо прописать в файле под названием style.css вот такой код:
dfn {
background: rgba(0,0,0,0.2);
padding: 0 0.4em;
cursor: help;
font-style: normal;
position: relative;
}
dfn::after {
content: attr(data-info);
display: inline;
position: absolute;
top: 22px; left: 0;
opacity: 0;
width: 230px;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
padding: 0.5em 0.8em;
background: rgba(0,0,0,0.8);
color: #fff;
pointer-events: none;
transition: opacity 250ms, top 250ms;
}
dfn::before {
content: '';
display: block;
position: absolute;
top: 12px; left: 20px;
opacity: 0;
width: 0; height: 0;
border: solid transparent 5px;
border-bottom-color: rgba(0,0,0,0.8);
transition: opacity 250ms, top 250ms;
}
dfn:hover {z-index: 2;}
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}
На этом у меня всё! Удачных решений!
Интересное решение, главное что без скриптов и дополнительных картинок, забрал себе. Спасибо.
Всегда пожалуйста!