Используя только CSS, покажите div на hover над

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

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

 div { display: none; } a:hover + div { display: block; } 
 Hover over me! 
Stuff shown on hover
 .showme{ display: none; } .showhim:hover .showme{ display : block; } 
 
HOVER ME
hai

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

 #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; } 
 
Hover
stuff

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

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

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

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

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

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

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

Я хотел бы предложить это решение для шаблонов общего назначения, которое будет расширяться по правильному решению, предоставленному Yi Jiang’s.

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

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

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

 

В 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 установлена ​​на фиксированную (также будет работать с абсолютной), содержимое не находится внутри нормального streamа документа, что позволяет видимому атрибуту работать хорошо.
  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.information. Несколько пикселей достаточны для обеспечения того, что div.popup может получать зависание при перемещении объекта cusor с div.information.

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

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

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

 .hoverable:not(:hover) + .show-on-hover { display: none; } 
 Hover over me! 
I'm a block element.

Hover over me also! I'm an inline element.

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

       Hover over me! 
the color is changing now

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

 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; } 
 Delete all obsolete informations? 
All data older than 2 weeks will be deleted.

HTML

 

Show content

Hello World

CSS

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

CodePen: наведите указатель на div-текст в другом div

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

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

И этот HTML:

 
expand
expand

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

  • Предварительная загрузка изображений CSS
  • Исправить размер шрифта на Mobile Safari (iPhone), где текст отображается непоследовательно, а некоторые шрифты больше других?
  • Почему не влияет процентная нагрузка / маржа на элементы Flex в Firefox и Edge?
  • CSS / HTML: Каков правильный способ сделать текст курсивом?
  • CSS Float Logic
  • Как удалить пунктирную границу вокруг активных гиперссылок в IE8 с помощью CSS
  • Элемент SVG USE и стиль наведения
  • bootstrap 4 размер столбца таблицы
  • Использование «display: table-cell» есть способ получить функциональность «colspan»?
  • Как выбрать первый, второй или третий элемент с заданным именем classа?
  • IE - скрытая радиокнопка не проверяется при нажатии соответствующей метки
  • Давайте будем гением компьютера.