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

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

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

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

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

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

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

.showme {
  display: none;
}

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

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

jsfiddle

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

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

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

Я обнаружил, что использование opacity лучше, оно позволяет вам добавлять переходы 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>

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

div {
    display: none;
}

a:hover > div {
    display: block;
} 

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

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

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

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

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

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

.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>

Это использует соседний селектор брата и не селектор .

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

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

• поддержка наведения на элемент любого типа или на несколько элементов;
• всплывающее окно может быть любого типа элемента или набора элементов, включая объекты;
• самодокументируемый код;
• обеспечивает всплывающее окно над другими элементами;
• надежная основа, чтобы следовать, если вы генерируете 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 установлено на фиксированное (также будет работать с абсолютным), содержимое не находится внутри нормального потока документа, что позволяет хорошо работать видимому атрибуту.
2. z-index установлен так, чтобы div.popup отображался над остальными элементами страницы.
3. Параметр information_popup_container имеет небольшой размер и поэтому не может быть наведен.
4. Этот код поддерживает только наведение на элемент div.information. Чтобы поддержать зависание над div.information и div.popup, см. Hover Over the 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.in. Несколько пикселей достаточно для того, чтобы div.popup мог получать указатель при перемещении курсора от div.information.

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

См. Fiddle http://jsfiddle.net/F68Le/ для полного примера с всплывающим многоуровневым меню.

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

<!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>

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

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<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

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

div:hover {
    display: block;
}

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

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>

Из моего тестирования с использованием этого CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

И этот HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

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

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: наведите курсор на элемент div, чтобы отобразить текст в другом элементе div

Не забывай если вы пытаетесь навести курсор на изображение, вы должны поместить его вокруг контейнера. CSS:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Если вы наведите курсор на это:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Это покажет:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>