Używając tylko CSS, pokaż div po najechaniu myszką na <a>

Chciałbym pokazać div, gdy ktoś unosi się nad <a>elementem, ale chciałbym to zrobić w CSS, a nie JavaScript. Czy wiesz, jak można to osiągnąć?

Można zrobić coś jak to :

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

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

Korzysta z sąsiedniego selektora rodzeństwa i jest podstawą menu rozwijanego suckerfish .

HTML5 pozwala elementom zakotwiczenia zawijać prawie wszystko, więc w takim przypadku divelement może stać się dzieckiem elementu zakotwiczenia. W przeciwnym razie zasada jest taka sama - użyj :hoverpseudoklasy, aby zmienić displaywłaściwość innego elementu.

.showme {
  display: none;
}

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

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

jsfiddle

Ponieważ ta odpowiedź jest popularna, myślę, że potrzebne jest małe wyjaśnienie. Zastosowanie tej metody po najechaniu wskaźnikiem na element wewnętrzny nie zniknie. Ponieważ .showme jest w środku .showhim, nie zniknie po przesunięciu myszy między dwiema liniami tekstu (lub czymkolwiek innym).

Są to przykłady dziwactw, o które należy zadbać, wdrażając takie zachowanie.

Wszystko zależy od tego, czego potrzebujesz. Ta metoda jest lepsza w scenariuszu stylu menu, natomiast Yi Jiang jest lepsza w przypadku podpowiedzi.

Zauważyłem, że użycie krycia jest lepsze, pozwala dodawać przejścia css3, aby uzyskać ładny efekt zakończenia najechania. Przejścia zostaną po prostu porzucone przez starsze przeglądarki IE, więc z wdziękiem ulegną degradacji.

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

Wiem, że jestem ekspertem, ale jestem niesamowicie dumny z siebie, że opracowałem coś na temat tego kodu. Jeśli zrobisz:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Zwróć uwagę na „>”). Możesz umieścić całość w tagu, tak długo, jak długo twój wyzwalacz (który może być w swoim div, lub prosto w tagu lub cokolwiek chcesz) fizycznie się dotyka ujawniony div, możesz przenosić mysz z jednego na drugi.

Może nie przydaje się to zbytnio, ale musiałem ustawić mój ujawniony div na przepełnienie: auto, więc czasami miał paski przewijania, których nie można było użyć, gdy tylko odejdziesz od div.

W rzeczywistości, po tym, jak w końcu opracowałem sposób na ujawnienie div, (chociaż jest to teraz dziecko wyzwalacza, a nie rodzeństwo), usiądź za wyzwalaczem, pod względem indeksu Z, (z niewielką pomocą tej strony : Jak sprawić, by element nadrzędny pojawił się nad dzieckiem ), nie musisz nawet przewracać odkrytego div, aby go przewinąć, po prostu zatrzymaj kursor nad spustem i użyj koła lub cokolwiek innego.

Mój ujawniony div obejmuje większość strony, więc ta technika sprawia, że ​​jest ona o wiele bardziej trwała, niż ekran miga z jednego stanu do drugiego przy każdym ruchu myszy. To jest naprawdę intuicyjne, dlatego jestem z siebie bardzo dumny.

Jedynym minusem jest to, że nie można umieszczać linków w całej rzeczy, ale można użyć całej rzeczy jako jednego dużego linku.

Ta odpowiedź nie wymaga znajomości typu wyświetlacza (wbudowany itp.), Który powinien być ukryty podczas wyświetlania:

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

Używa to sąsiedniego selektora rodzeństwa i selektora nie .

Chciałbym zaoferować to szablonowe rozwiązanie ogólnego przeznaczenia, które rozwija prawidłowe rozwiązanie dostarczone przez Yi Jiang's.

Dodatkowe korzyści obejmują:

• obsługa najechania kursorem na dowolny typ elementu lub wiele elementów;
• popup może być dowolnym typem elementu lub zestawem elementów, w tym obiektami;
• kod samokontrujący;
• zapewnia wyświetlanie wyskakującego okienka nad innymi elementami;
• solidna podstawa do naśladowania, jeśli generujesz kod HTML z bazy danych.

W html umieszczasz następującą strukturę:

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

W css umieszczasz następującą strukturę:

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;
}

Należy zwrócić uwagę na kilka punktów:

1. Ponieważ pozycja div.popup jest ustawiona na stałą (działałaby również z wartością bezwzględną), zawartość nie mieści się w normalnym przepływie dokumentu, co pozwala na poprawne działanie widocznego atrybutu.
2. Z-index jest ustawiony tak, aby div.popup pojawił się nad innymi elementami strony.
3. Information_popup_container jest ustawiony na mały rozmiar i dlatego nie można go przesuwać.
4. Ten kod obsługuje tylko najechanie kursorem na element div.information. Aby wesprzeć najechanie kursorem na div.information i div.popup, zobacz poniżej „Najedź kursorem na okienko wyskakujące”.
5. Został przetestowany i działa zgodnie z oczekiwaniami w przeglądarce Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 i Google Chrome 28.0.15.

Najedź kursorem na wyskakujące okienko

Jako dodatkowe informacje. Gdy wyskakujące okienko zawiera informacje, które możesz chcieć wyciąć i wkleić lub zawiera obiekt, z którym możesz chcieć wchodzić w interakcje, a następnie najpierw zamień:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

z

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

Po drugie, dostosuj pozycję div.popup, tak aby zachodziło na nią nakładanie się informacji div. Kilka pikseli wystarcza, aby upewnić się, że div.popup może odbierać kursor podczas odsuwania wskaźnika od informacji div.in.

Nie działa to zgodnie z oczekiwaniami w przeglądarce Internet Explorer 10.0.9200 i działa zgodnie z oczekiwaniami w przeglądarce Opera 12.16, Firefox 18.0 i Google Chrome 28.0.15.

Zobacz fiddle http://jsfiddle.net/F68Le/, aby uzyskać pełny przykład z wyskakującym menu wielopoziomowym.

przetestuj ten kod

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

+Allow „wybierz” tylko pierwszy nie zagnieżdżonego elementu, gdy >tylko wybrać elementy zagnieżdżone - lepsze jest użycie ~, które pozwalają wybrać dowolny element, który ma dziecko z rodzicem unosił element. Używając krycia / szerokości i przejścia możesz zapewnić płynny wygląd

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>

Dla mnie, jeśli chcę wchodzić w interakcję z ukrytym divem, nie widząc, jak znika za każdym razem, gdy opuszczam element wyzwalający (w tym przypadku), muszę dodać:

div:hover {
    display: block;
}

W oparciu o główną odpowiedź jest to przykład przydatny do wyświetlenia podpowiedzi informacyjnej po kliknięciu w ?pobliżu linku:

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>

Z moich testów przy użyciu tego CSS:

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

A ten HTML:

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

, spowodowało to, że rozwija się przy użyciu drugiego, ale nie rozwija się przy użyciu pierwszego. Jeśli więc istnieje div między celem aktywowania a ukrytym div, to nie zadziała.

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: najedź kursorem na div, pokaż tekst w innym div

Nie zapomnij jeśli próbujesz najechać myszką na obraz, musisz go umieścić wokół kontenera. css:

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

.brand-sales {
    display: none;
}

Jeśli najedziesz na to:

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

To pokaże:

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