Используя только CSS, покажите div при наведении на <a>

Question

Я хотел бы показать div, когда кто-то наводит курсор на элемент <a>, но я хотел бы сделать это в CSS, а не в JavaScript. Вы знаете, как этого можно достичь?

Answer 1

Вы можете сделать что-то вроде this :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Используется соседний селектор брата и является основой раскрывающегося меню suckerfish .

HTML5 позволяет элементам привязки оборачивать практически все, поэтому в этом случае элемент div можно сделать дочерним для привязки. В остальном принцип тот же - используйте псевдокласс :hover, чтобы изменить свойство display другого элемента.

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Поскольку этот ответ популярен, я думаю, что требуется небольшое объяснение. При использовании этого метода при наведении курсора на внутренний элемент он не исчезнет. Поскольку .showme находится внутри .showhim, он не исчезнет, ​​когда вы перемещаете указатель мыши между двумя строками текста (или чем-то другим)

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

Все зависит от того, для чего вам это нужно. Этот метод лучше подходит для сценария стиля меню, тогда как И Цзян лучше для подсказок.

Answer 3

Я обнаружил, что использование непрозрачности лучше, оно позволяет добавлять css3 переходы, чтобы получить хороший законченный эффект наведения. Переходы будут просто отбрасываться старыми браузерами IE, поэтому он постепенно снижается до.

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Answer 4

Я знаю, что я эксперт, но я невероятно горжусь тем, что разработал что-то об этом коде.Если вы сделаете:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(обратите внимание на '>'). Вы можете содержать все это в теге, тогда, пока ваш триггер (который может быть в своем собственном div или прямо вверх)в теге, или что угодно, физически касаясь раскрытого div, вы можете перемещать мышь от одного к другому.

Возможно, это не очень полезно, но мне пришлось установитьмой раскрытый div для переполнения: auto, поэтому иногда в нем присутствовали полосы прокрутки, которые нельзя было использовать, как только вы отошли от div.

Фактически, после окончательной разработки, как сделать раскрытый div, (хотя теперь он является дочерним по отношению к триггеру, а не к брату), сидите за триггером в терминах z-index (с небольшой подсказкой на этой странице: Как получить родительский элемент, отображаемый вышеДитя ) тебе даже не нужно переворачивать раскрытый div, чтобы прокрутить его, просто оставайся над курсором и используй свое колесо или что-то еще.

Мой раскрытый div покрывает большую часть страницытак что эта техника делает его намного более пермскимanent, а не мигание экрана из одного состояния в другое с каждым движением мыши.Это действительно интуитивно понятно, поэтому я действительно горжусь собой.

Единственным недостатком является то, что вы не можете помещать ссылки в одно целое, но вы можете использовать все это как одну большую ссылку.

Answer 5

Этот ответ не требует, чтобы вы знали, какой тип отображения (встроенный и т. Д.) Должен быть скрываемым элементом при отображении:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

При этом используется соседний селектор брата и не селектор .

Answer 6

Я хотел бы предложить это шаблонное решение общего назначения, которое расширяет правильное решение, предоставленное И Цзяном.

Дополнительные преимущества включают:

• поддержка наведения на любой элементтип или несколько элементов;
• всплывающее окно может быть любого типа элемента или набора элементов, включая объекты;
• самодокументируемый код;
• обеспечивает появление всплывающего окнаповерх других элементов;
• разумная основа, которой нужно следовать, если вы генерируете html-код из базы данных.

В html вы помещаете следующую структуру:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

В CSS вы размещаете следующую структуру:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Обратите внимание на следующие моменты:

1. Поскольку положение div.popup установлено на фиксированное (также будет работать с абсолютным) содержимое не внутри нормального потока документа, что позволяет атрибуту visible работать хорошо.
2. z-index установлен, чтобы div.popup отображался над другой страницей.elements.
3. Параметр information_popup_container имеет небольшой размер и поэтому не может быть наведен на него.
4. Этот код поддерживает только наведение на элемент div.information.Чтобы поддержать зависание над div.information и div.popup, см. Всплывающее окно «Наведите курсор на всплывающее окно» ниже.
5. Он был протестирован и работает, как ожидается, в Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 и Google Chrome 28.0..15.

Наведите курсор на всплывающее окно

В качестве дополнительной информации.Когда всплывающее окно содержит информацию, которую вы, возможно, захотите вырезать и вставить, или содержит объект, с которым вы, возможно, захотите взаимодействовать, сначала замените:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

на

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

И затемотрегулируйте положение div.popup таким образом, чтобы оно совпадало с информацией о div.inop.Несколько пикселей достаточно для того, чтобы div.popup мог получать указатель при перемещении курсора от div.information.

Это не работает должным образом с Internet Explorer 10.0.9200 и работает должным образом сOpera 12.16, Firefox 18.0 и Google Chrome 28.0.15.

Полный пример с всплывающим многоуровневым меню см. В скрипте http://jsfiddle.net/F68Le/.

Answer 7

пожалуйста, проверьте этот код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

Answer 8

Для меня, если я хочу взаимодействовать со скрытым div, не видя, как он исчезает каждый раз, когда я покидаю инициирующий элемент (в данном случае, a), я должен добавить:

div:hover {
    display: block;
}

Answer 9

Исходя из основного ответа, это пример, полезный для отображения всплывающей подсказки с информацией при нажатии на ? возле ссылки:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Answer 10

+ разрешает «выбирать» только первый не вложенный элемент, > выбирает только вложенные элементы - тем лучше будет использовать ~, который позволяет выбрать произвольный элемент, который является дочерним по отношению к родительскому элементу наведения. Используя непрозрачность / ширину и переход, вы можете обеспечить плавное отображение

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see </div>

<div class='bbb'>B
  <div class='ccc'>C
    <div class='ddd'>D</div>
  </div>
</div>

<div class='eee'>E
  <div class='fff'>F
    <div class='ggg'>G</div>
    <div class='hhh'>H</div>
  </div>
</div>