Використовуючи лише CSS, покажіть поділ на курсор миші на <a>


302

Я хотів би показати div, коли хтось наводить курсор на <a>елемент, але я хотів би зробити це в CSS, а не в JavaScript. Чи знаєте ви, як цього можна досягти?


1
div повинен був би бути всередині тега ..
amosrivera

будь ласка, дивіться stackoverflow.com/questions/3847568/…, коли ви виявите, що ця техніка здається "зламаною"
d -_- b

2
пам’ятайте, що: наведення курсору не буде працювати однаково на сенсорних екранах, і в наші дні його слід використовувати обережно (наприклад, уникайте використання для відображення додаткових елементів навігації)
Paweł Bulwan

@Pawel Bulwan Я поєднав тут: "hover" з "+" пропозиціями селектора CSS з: цільовою пропозицією для показу вмісту при натисканні (від stackoverflow.com/questions/18849520/… ) у рішення, яке має працювати з обома мишею і дотик - zoomicon.wordpress.com/2017/11/25/…
Джордж Бірбіліс

слідкуючи за моїм останнім коментарем, також побачите деякі корисні варіанти у відповіді на коментар, яку я зробив у цьому записі в
Джордж Бірбіліс

Відповіді:


531

Ви можете зробити що - щось на зразок цього :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Для цього використовується сусідній селектор сестер і є основою випадаючого меню прикормки .

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


12
приємне рішення, навіть якщо ви поставите div: hover {display: block;}, тоді div не буде приховуватись, коли ви наведете сам div ..
Альпер

22
Це зробить кожен <div>на сторінці, display:noneі коли миша навести курсор на "Наведіть на мене!" це зробить кожен <div>наступний <a>всередині того самого батька display:block. Можливо, буде кращою ідеєю вибрати їх .class-nameабо за допомогою #id. Інакше хороший пост.
Нейт

10
додати div: hover {display: block; }, щоб уникнути цього, поки їх миша над ним
мавповий будинок

Можливо, доцільно використовувати видимість замість відображення. Наскільки я пам'ятаю, це ефективніше, тому що дисплей перерисовує діви кожен раз. Хоча це, мабуть, не має значення для одного діва, якщо вам доведеться зробити багато, можливо, краще зробити їх невидимими.
Prinsig

@Yi Jiang - як ти додав цей код у відповідь?
Мухаммед Замер

254

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}
<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Оскільки ця відповідь популярна, я думаю, що потрібне невелике пояснення. Використовуючи цей метод, коли ви наведіть курсор на внутрішній елемент, він не зникне. Оскільки .showme знаходиться всередині .showhim, воно не зникне, коли ви перемістите курсор миші між двома рядками тексту (або як би там не було).

Це приклад хитрощів, над якими потрібно подбати, реалізуючи таку поведінку.

Все залежить, для чого вам це потрібно. Цей метод кращий для сценарію меню, а Yi Jiang - підказки.


У вас не може бути елемента блоку всередині вбудованого елемента, якщо ви не використовуєте HTML 5.
метил

3
HTML5 його поки що не є стандартом, тому метод Йі Цзян є кращим.
метил

4
Я знаю, що це краще, ось чому я підтримав це :) Я дав робочий приклад, представляючи концепцію (css селектори конкретніше), не розумію, чому спростував це ^^
n00b

Це може бути краще використовувати <span>s, але я думаю, що це кращий приклад, ніж Yi Jiang.
Нейт

37

Я виявив, що використання непрозорості краще, воно дозволяє додавати переходи 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>


5
Це чудово, я використовував це для набагато більшого дива. Я хотів, щоб розділ "stuff" залишився видимим, якщо я переміщую курсор з "div" на div на "stuff" div, щоб я змінив останній елемент стилю з #hover:hover + #stuff {на #hover:hover + #stuff, #stuff:hover {. Тоді поділ "речі" залишається видимим при переході на цей дів!
NotJay

26

Я знаю, значить, експерт, але я неймовірно пишаюся собою, що щось розробив над цим кодом. Якщо ти зробиш:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

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

Можливо, це не дуже корисно, але мені довелося встановити розкритий дів на переповнення: auto, тому іноді в ньому були смуги прокрутки, які не можна було використати, як тільки ви віддаляєтесь від діва.

Насправді, нарешті, розробивши, як зробити розкритий дів, (хоча зараз це дитина тригера, а не рідний брат), сідайте за тригер у плані z-індексу (за невеликою допомогою на цій сторінці : Як змусити батьківський елемент з’являтися над дочірнім ), вам навіть не потрібно перекидати виявлений div, щоб прокрутити його, просто наведіть курсор на курок і скористайтеся колесом чи будь-яким іншим.

Моя розкрита діва охоплює більшу частину сторінки, тому ця методика робить її набагато постійнішою, а не екран, що миготить з одного стану в інший при кожному русі миші. Насправді це справді інтуїтивно, тому я дуже пишаюся собою.

Єдиний мінус полягає в тому, що ви не можете розміщувати посилання в межах усієї речі, але ви можете використовувати всю річ як одну велику посилання.


16

Ця відповідь не вимагає, щоб ви знали, яким типом дисплея (вбудованого тексту тощо) повинен бути прихований елемент під час показу:

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

Для цього використовується сусідній селектор, а не селектор .


13

Я хотів би запропонувати це шаблонне рішення загального призначення, яке розширює правильне рішення, надане 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;
}

Зазначимо кілька моментів:

  1. Оскільки позиція div.popup встановлена ​​фіксованою (також працюватиме з абсолютним), вміст не знаходиться в межах нормального потоку документа, що дозволяє добре бачити атрибут видимості.
  2. z-індекс встановлено для того, щоб div.popup з'явився над іншими елементами сторінки.
  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.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/ для повного прикладу із спливаючим багаторівневим меню.


4

будь ласка, протестуйте цей код

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

4

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

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>


2

Для мене, якщо я хочу взаємодіяти з прихованим ділом, не бачачи, що він зникає кожного разу, коли я залишаю запускаючий елемент (a в такому випадку), я повинен додати:

div:hover {
    display: block;
}

0

На основі основної відповіді, це приклад, корисний для відображення інформаційної підказки при натисканні на ?посилання поруч:

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>


-1

З мого тестування за допомогою цього 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>

, це призвело до того, що він розширюється за допомогою другого, але не розширюється за допомогою першого. Отже, якщо між ціллю, що наближається, і прихованим дівом, є діва, це не спрацює.



-1

Не забувайте. якщо ви намагаєтесь навести навколо зображення, вам доведеться покласти його навколо контейнера. 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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.