Я хотів би показати div, коли хтось наводить курсор на <a>
елемент, але я хотів би зробити це в CSS, а не в JavaScript. Чи знаєте ви, як цього можна досягти?
Я хотів би показати div, коли хтось наводить курсор на <a>
елемент, але я хотів би зробити це в CSS, а не в JavaScript. Чи знаєте ви, як цього можна досягти?
Відповіді:
Ви можете зробити що - щось на зразок цього :
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
Для цього використовується сусідній селектор сестер і є основою випадаючого меню прикормки .
HTML5 дозволяє елементам якоря обгортати практично все, тому в цьому випадку div
елемент можна зробити дочірним якорем. Інакше принцип той самий - використовуйте :hover
псевдоклас для зміни display
властивості іншого елемента.
<div>
на сторінці, display:none
і коли миша навести курсор на "Наведіть на мене!" це зробить кожен <div>
наступний <a>
всередині того самого батька display:block
. Можливо, буде кращою ідеєю вибрати їх .class-name
або за допомогою #id
. Інакше хороший пост.
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
Оскільки ця відповідь популярна, я думаю, що потрібне невелике пояснення. Використовуючи цей метод, коли ви наведіть курсор на внутрішній елемент, він не зникне. Оскільки .showme знаходиться всередині .showhim, воно не зникне, коли ви перемістите курсор миші між двома рядками тексту (або як би там не було).
Це приклад хитрощів, над якими потрібно подбати, реалізуючи таку поведінку.
Все залежить, для чого вам це потрібно. Цей метод кращий для сценарію меню, а Yi Jiang - підказки.
<span>
s, але я думаю, що це кращий приклад, ніж Yi Jiang.
Я виявив, що використання непрозорості краще, воно дозволяє додавати переходи 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>
#hover:hover + #stuff {
на #hover:hover + #stuff, #stuff:hover {
. Тоді поділ "речі" залишається видимим при переході на цей дів!
Я знаю, значить, експерт, але я неймовірно пишаюся собою, що щось розробив над цим кодом. Якщо ти зробиш:
div {
display: none;
}
a:hover > div {
display: block;
}
(Зверніть увагу на '>') Ви можете вмістити всю тегу в тезі, доки ваш тригер (який може бути у власному диві, або прямо в тег, або все, що завгодно) фізично торкається розкритий div, ви можете переміщати мишу з однієї на іншу.
Можливо, це не дуже корисно, але мені довелося встановити розкритий дів на переповнення: auto, тому іноді в ньому були смуги прокрутки, які не можна було використати, як тільки ви віддаляєтесь від діва.
Насправді, нарешті, розробивши, як зробити розкритий дів, (хоча зараз це дитина тригера, а не рідний брат), сідайте за тригер у плані z-індексу (за невеликою допомогою на цій сторінці : Як змусити батьківський елемент з’являтися над дочірнім ), вам навіть не потрібно перекидати виявлений 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>
Для цього використовується сусідній селектор, а не селектор .
Я хотів би запропонувати це шаблонне рішення загального призначення, яке розширює правильне рішення, надане Yi Jiang's.
До додаткових переваг належать:
У 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.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.popup. Кількох пікселів достатньо, щоб переконатися, що 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/ для повного прикладу із спливаючим багаторівневим меню.
будь ласка, протестуйте цей код
<!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>
На основі основної відповіді, це приклад, корисний для відображення інформаційної підказки при натисканні на ?
посилання поруч:
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>
, це призвело до того, що він розширюється за допомогою другого, але не розширюється за допомогою першого. Отже, якщо між ціллю, що наближається, і прихованим дівом, є діва, це не спрацює.
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>