seocopwriteHTML разметка проста до безобразия.

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

 

 



<div class="wrap_element">
<span>Подсказка для ссылки</span>
<a href="#">Наведите курсор мыши</a>
</div>

Для того, что бы все заработало как надо, достаточно прописать следующие стили:

.wrap_element {
position:relative;
}
.wrap_element span {
display:none;
}
.wrap_element:hover span {
display:block;
position:absolute;
top:-45px;
left:10px;
}

Однако не помешает добавить немного кода, что бы придать конструкции приличный внешний вид:

.wrap_element {
padding:3px 10px;
display:inline-block;
position:relative;
}
a:hover {
text-decoration : none;
}
.wrap_element span {
margin-left:8px;
padding:2px 3px;
display:none;
color:#6c6c6c;
background:#ffffff;
border:1px solid #cccccc;
}
.wrap_element:hover span {
display:block;
position:absolute;
top:-45px;
left:10px;
}

Конечно, приведенный пример не является панацеей на все случаи жизни, но может пригодится в ряде ситуаций (например, подсказка в тексте), или послужить отправной точкой для реализации более продвинутых идей.

__________________________________________________________________________________________________________________

скачать joomla | обновление joomla | модуль joomla | администрирование | seo продвижение | joomla магазиншаблоны сайтов

обратная связь 

При копировании материала ссылка на сайт joomla4.ru обязательна.