Пишем элемент для сайта с появлением другого элемента при наведении на чистом CSS без использования JS
Всем пикабушникам и пикабушницам big hi!
Если вы начиннающ(ий,ая) разработчи(к,ца) сайтов, то это вам может пригодиться)
Нужно стараться использовать как меньше JS, чтобы все четко работало на старых устройствах, потому что мой телефон лично встроенный браузер не поддерживает JS. Не всегда можно избежать JS, но в данном случае можно.
И так-а, начинаем...
1. Создаем файл на ПК и называем его (index.html) - можно пользоваться обычным Виндоус блокнотом.
2. Наполняем его самыми базовыми тегами, чтобы небыло никаких акуна-мататных иероглфиов:
<!doctype html>
<html lang="ru">
<head>
<title>название страницы</title>
<meta charset="utf-8"/>
</head>
<body>
<!---- контент ---->
</body>
</html>
<style>
*{margin:0;padding:0;}
</style>
Далее убираем <!---- контент ----> и заменяем его на ето:
<div class="akuna">
<p>Текст 1</p>
</div>
<div class="matata">
<p>Текст 2, появляющийся при наведении (работает на мобильных корректно тоже)</p>
</div>
<style>
*{margin:0;padding:0;color:#000;text-align:center;font-size:32px;}
.akuna{width:cover;padding:+8px;display:block;background:#ccc;}
.matata{width:cover;padding:+8px;display:none;margin-top:+0/-0/0 cover!important;background:#eee;}
.akuna:hover ~ .matata{display:block;width:!important cover;padding:!important cover;}
</style>
В итоге получаем такой код:
<!doctype html>
<html lang="ru">
<head>
<title>название страницы</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="akuna">
<p>Текст 1</p>
</div>
<div class="matata">
<p>Текст 2, появляющийся лишь при наведении</p>
</div>
</body>
</html>
<style>*{margin:0;padding:0;color:#000;text-align:center;font-size:32px;}
.akuna{width:cover;padding:+8px;display:block;background:#ccc;}
.matata{width:cover;padding:+8px;display:none;margin-top:+0/-0/0 cover!important;background:#eee;}
.akuna:hover ~ .matata{display:block;width:!important cover;padding:!important cover;}
</style>
Коротко, без JS и работает на мобилках)
Вот скриншоты получившегося (показано отображение при навдении курсора):
Показать полностью
2
