Я хотел бы показать div, когда кто-то наведет элемент <a>, но я хотел бы сделать это в CSS, а не в JavaScript. Знаете ли вы, как это можно достичь?
Используя только CSS, покажите div на hover над
Ответ 1
Вы можете сделать что-то вроде this:
div {
display: none;
}
a:hover + div {
display: block;
}<a>Hover over me!</a>
<div>Stuff shown on hover</div>Ответ 2
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>Ответ 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>Ответ 4
Я знаю знающего эксперта, но я невероятно горжусь собой за то, что что-то проработал над этим кодом. Если вы выполните:
div {
display: none;
}
a:hover > div {
display: block;
}
(Обратите внимание на " > " ). Вы можете содержать все это в теге, а затем, пока ваш триггер (который может быть в нем собственный div или прямо в теге или все, что вы хотите) физически касается обнаруженного div, вы можете перемещать мышь от одного к другому.
Может быть, это не очень полезно для многих, но мне пришлось установить мой раскрытый div на переполнение: auto, поэтому иногда у него были полосы прокрутки, которые нельзя было использовать, как только вы удаляетесь от div.
Фактически, после того, как наконец-то выяснилось, как сделать обнаруженный div (хотя теперь он является дочерним элементом триггера, а не родственником), сидите за курок в терминах z-индекса (с небольшой помощью с этой страницы: Как получить родительский элемент, который появится над дочерним элементом), вам даже не нужно перекатывать обнаруженный div, чтобы прокрутить его, просто продолжайте парить над триггер и использовать ваше колесо или что-то еще.
Мой раскрытый div охватывает большую часть страницы, поэтому этот метод делает его намного более постоянным, а не экраном, мигающим из одного состояния в другое с каждым движением мыши. Это действительно интуитивно, поэтому я действительно очень горжусь собой.
Единственным недостатком является то, что вы не можете поместить ссылки во все это, но вы можете использовать все это как одну большую ссылку.
Ответ 5
Я хотел бы предложить это решение для шаблонов общего назначения, которое будет расширяться по правильному решению, предоставленному Yi Jiang's.
Дополнительные преимущества:
- поддержка зависания над любым типом элемента или несколькими элементами;
- всплывающее окно может представлять собой любой тип элемента или набор элементов, включая объекты;
- самодокументирующий код;
- обеспечивает появление всплывающих окон над другими элементами;
- звуковая основа для отслеживания, если вы генерируете 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;
}
Несколько замечаний:
- Поскольку позиция div.popup установлена на фиксированную (также будет работать с абсолютной), содержимое не находится внутри нормального потока документа, что позволяет видимому атрибуту работать хорошо.
- z-index установлен для обеспечения того, что div.popup появляется над другими элементами страницы.
- Информационный_popup_container имеет малый размер и, следовательно, не может быть виден.
- Этот код поддерживает только зависание элемента div.information. Чтобы поддерживать зависание как div.information, так и div.popup, см. Hover Over the Popup ниже.
- Он протестирован и работает как ожидается в 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/ для полного примера с многоуровневым меню всплывающих окон.
Ответ 6
Этот ответ не требует, чтобы вы знали, какой тип отображения (встроенный и т.д.) должен отображаться скрываемый элемент:
.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>Ответ 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>
Ответ 8
Для меня, если я хочу взаимодействовать со скрытым div, не видя, что он исчезает каждый раз, когда я оставляю триггерный элемент (в этом случае), я должен добавить:
div:hover {
display: block;
}
Ответ 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>Ответ 10
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
Ответ 11
Не забывай если вы пытаетесь навести курсор на изображение, вы должны поместить его вокруг контейнера. 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>
Ответ 12
+ Позволяет "выбирать" только первый не вложенный элемент, > выбирать только вложенные элементы - тем лучше использовать ~ которые позволяют выбрать произвольный элемент, который является дочерним по отношению к родительскому элементу наведения. Используя непрозрачность/ширину и переход, вы можете обеспечить плавный вид
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>Ответ 13
Из моего тестирования с использованием этого 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, это не сработает.