Отображение скрытых элементов при наведении мыши на гиперссылку или на тег <a>
При наведении мыши скрытые элементы HTML могут стать видимыми с помощью CSS. В этой статье вы научитесь, как отображать скрытые элементы. Можно применять CSS для отображения любого HTML-элемента при наведении мыши на тег <a>, используя смежные одноуровневые селекторы. Смежный одноуровневый селектор используется, чтобы выбрать смежный элемент или элемент, находящийся рядом с указанным тегом селектора. Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.
Рассмотрим пример и попробуем разобраться с каждой частью кода.
1.Создайте HTML
- Можно добавить тег <center> в разделе <body> для выравнивания контента по центру (тег <center> не поддерживается в HTML5). Вместо этого можно также использовать CSS свойство text-align со значением “center”.
- Добавьте тег <h2> и напишите в нем контент.
- Добавьте тег <b> или <strong> для выделения указанной части текста жирным шрифтом, чтобы он был заметен для пользователя.
- Добавьте тег <br>, который указывает разрыв строки.
- Добавьте тег<a>, используемый для вставки гиперссылок на другие страницы, или файлы, местоположения на одной и той же странице, электронные почты, или любой другой URL.
- Создайте тег <div> и напишите в нем контент.
<body>
<center>
<h2>W3docs</h2>
<b>
Наведите мышь на элемент внизу, чтобы увидеть div-элемент.
</b>
<br>
<br>
<a href=”https://www.w3docs.com/”>W3docs</a>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
</center>
</body>2. Добавьте CSS
- Выберите цвет для тега <h2> с помощью свойства color.
- Используйте свойство display для <div> и задайте значение "none". Это значит, что элемент не будет отображаться.
- Используйте свойство border, чтобы добавить границу к div, и задайте значения свойств border-width, border-style и border-color.
- Используйте свойство cursor со значением "pointer" для тега <a>.
- Используйте смежный одноуровневый селектор. В нашем примере выбраны все элементы <div>, находящиеся сразу после элемента <a>:
- Используйте свойство display и задайте значение "block".
- Задайте цвет текста с помощью свойства color. Можете выбрать любой цвет из инструмента Выбор цвета.
- Задайте font-size для div.
h2 {
color: #4287f5;
}
div {
display: none;
border: 5px double #b4b8bf;
}
a{
cursor:pointer;
}
a:hover + div {
display: block;
color: #4287f5;
font-size: 20px;
}Ниже показан результат нашего кода:
Пример
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
h2 {
color: #4287f5;
}
div {
display: none;
border: 5px double #b4b8bf;
}
a{
cursor:pointer;
}
a:hover + div {
display: block;
color: #4287f5;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h2>W3docs</h2>
<b>
Наведите мышь на элемент внизу, чтобы увидеть div-элемент.
</b>
<br>
<br>
<a href=”https://www.w3docs.com/”>W3docs</a>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
</center>
</body>
</html>Рассмотрим другой пример:
Пример
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
main{
text-align:center;
}
h2 {
color: green;
}
div {
display: none;
border: 5px double #b4b8bf;
}
a{
display:block;
margin-top:15px;
cursor:pointer;
}
a:hover + div {
display: block;
color: #4287f5;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<h2>W3docs</h2>
<strong>
Наведите мышь на элемент внизу, чтобы увидеть div-элемент.
</strong>
<a href=”https://www.w3docs.com/”>W3docs</a>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
</main>
</body>
</html>В этом примере мы использовали тег <main>, вместо элемента <center>. В спецификации HTML5 это новый элемент уровня блока. Тег используется, чтобы определить основной контент документа. Мы использовали свойство text-align со значением “center”. Вместо тега <b>, можно использовать тег <strong>.
Пример
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
div{
text-align:center;
}
h2 {
color: green;
}
.hide {
display: none;
border: 5px double #b4b8bf;
}
a{
display:block;
margin-top:15px;
cursor:pointer;
text-decoration:none; }
a:hover + div {
display: block;
color: #4287f5;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h2>W3docs</h2>
<strong>
Наведите мышь на элемент внизу, чтобы увидеть div-элемент.
</strong>
<a href=”https://www.w3docs.com/”>W3docs</a>
<div class="hide">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</div>
</div>
</body>
</html>В этом примере мы использовали тег <div> внутри другого <div> и добавили для него класс “hide”. Здесь получается одинаковый результат.
Рассмотрим другой пример:
Пример
<!DOCTYPE html>
<html>
<title>Заголовок документа</title>
<head>
<style>
div{
text-align:center;
}
h2 {
color: #4287f5;
}
.hide {
display: none;
border: 5px double #b4b8bf;
}
a{
display:block;
margin-top:15px;
cursor:pointer;
text-decoration:none;
}
a:hover + span {
display: block;
color: #4287f5;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h2>W3docs</h2>
<strong>
Наведите мышь на элемент внизу, чтобы увидеть div-элемент.
</strong>
<a href=”https://www.w3docs.com/”>W3docs</a>
<span class="hide">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
</span>
</div>
</body>
</html>В этом примере мы использовали тег a