Usando apenas CSS, show div ao passar o mouse sobre <a>

Gostaria de mostrar uma div quando alguém passa o mouse sobre um <a>elemento, mas gostaria de fazer isso em CSS e não em JavaScript. Você sabe como isso pode ser alcançado?

Você pode fazer algo parecido com isso :

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

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

Isso usa o seletor de irmão adjacente e é a base do menu suspenso otário .

O HTML5 permite que os elementos âncora envolvam quase tudo, portanto, nesse caso, o divelemento pode ser transformado em filho da âncora. Caso contrário, o princípio é o mesmo - use a :hoverpseudo-classe para alterar a displaypropriedade de outro elemento.

.showme {
  display: none;
}

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

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

jsfiddle

Como essa resposta é popular, acho que é necessária uma pequena explicação. Usando esse método quando você passa o mouse sobre o elemento interno, ele não desaparece. Como o .showme está dentro do .showhim, ele não desaparece quando você move o mouse entre as duas linhas de texto (ou o que quer que seja).

Estes são exemplos de quirqs que você precisa cuidar ao implementar esse comportamento.

Tudo depende do que você precisa. Esse método é melhor para um cenário de estilo de menu, enquanto o de Yi Jiang é melhor para dicas de ferramentas.

Achei que usar a opacidade é melhor, ele permite que você adicione transições css3 para fazer um bom efeito de foco final. As transições serão descartadas apenas pelos navegadores IE mais antigos, de modo que degradam normalmente.

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

Sou especialista em meios, mas estou incrivelmente orgulhosa de ter trabalhado sobre esse código. Se você fizer:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Observe o '>') Você pode conter a coisa toda em uma tag, então, desde que seu gatilho (que pode estar em sua própria div, ou diretamente na tag a, ou qualquer coisa que você queira) toque fisicamente a div revelada, você pode mover o mouse de um para o outro.

Talvez isso não seja muito útil, mas eu tive que definir meu div revelado para transbordar: auto, então às vezes ele tinha barras de rolagem, que não podiam ser usadas assim que você se afastava do div.

De fato, depois de finalmente descobrir como fazer a div revelada (embora agora seja filha do gatilho, não um irmão), sente-se atrás do gatilho, em termos de z-index, (com uma pequena ajuda desta página : Como fazer com que um elemento pai apareça acima de filho ), você nem precisa rolar o div revelado para rolar o mouse, apenas fique pairando sobre o gatilho e use sua roda, ou o que for.

Minha div revelada cobre a maior parte da página; portanto, essa técnica a torna muito mais permanente, em vez da tela piscando de um estado para outro a cada movimento do mouse. Na verdade, é realmente intuitivo, daí o motivo pelo qual tenho muito orgulho de mim mesmo.

A única desvantagem é que você não pode colocar links dentro da coisa toda, mas pode usá-la como um grande link.

Esta resposta não exige que você saiba que tipo de exibição (em linha, etc.) o elemento ocultável deve ser ao ser mostrado:

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

Isso usa o seletor de irmão adjacente e o não seletor .

Gostaria de oferecer esta solução de modelo de uso geral que se expande para a solução correta fornecida pela Yi Jiang.

Os benefícios adicionais incluem:

• suporte para passar o mouse sobre qualquer tipo de elemento ou vários elementos;
• o pop-up pode ser qualquer tipo de elemento ou conjunto de elementos, incluindo objetos;
• código de auto-documentação;
• garante que o pop-up apareça sobre os outros elementos;
• uma base sólida a seguir se você estiver gerando código html a partir de um banco de dados.

No html, você coloca a seguinte estrutura:

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

No css, você coloca a seguinte estrutura:

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

Alguns pontos a serem observados são:

1. Como a posição do div.popup está definida como fixa (também funcionaria com absoluto), o conteúdo não está dentro do fluxo normal do documento, o que permite que o atributo visível funcione bem.
2. O z-index está configurado para garantir que o div.popup apareça acima dos outros elementos da página.
3. O information_popup_container está definido como um tamanho pequeno e, portanto, não pode passar o mouse.
4. Esse código oferece suporte apenas ao passar o mouse sobre o elemento div.information. Para oferecer suporte ao passar o mouse sobre as informações div.info e div.popup, consulte Passe o mouse sobre o pop-up abaixo.
5. Foi testado e funciona como esperado no Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 e Google Chrome 28.0.15.

Passe o mouse sobre o pop-up

Como informação adicional. Quando o pop-up contém informações com as quais você pode recortar e colar ou contém um objeto com o qual você deseja interagir, primeiro substitua:

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

com

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

E segundo, ajuste a posição do div.popup para que haja uma sobreposição com o div.information. Alguns pixels são suficientes para garantir que o div.popup possa receber o cursor ao mover o cliente para fora das informações div.

Isso não funciona como esperado no Internet Explorer 10.0.9200 e funciona como esperado no Opera 12.16, Firefox 18.0 e Google Chrome 28.0.15.

Veja fiddle http://jsfiddle.net/F68Le/ para um exemplo completo com um menu multinível pop-up.

por favor teste este código

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

O +permitir 'selecionar' apenas o primeiro elemento não aninhado, >apenas os elementos aninhados - o melhor é usar o ~que permite selecionar o elemento arbitrário que é filho do elemento pairado pai. Usando opacidade / largura e transição, você pode fornecer uma aparência suave

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>

Para mim, se eu quiser interagir com a div oculta sem vê-la desaparecer toda vez que deixar o elemento acionador (a nesse caso), devo adicionar:

div:hover {
    display: block;
}

Com base na resposta principal, este é um exemplo, útil para exibir uma dica de ferramenta de informações ao clicar em ?um link próximo:

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>

Dos meus testes usando este CSS:

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

E este HTML:

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

, resultou que ele se expande usando o segundo, mas não se expande usando o primeiro. Portanto, se houver uma div entre o alvo em foco e a div oculta, ela não funcionará.

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: passe o mouse sobre div mostrar texto em outra div

Não se esqueça se você estiver tentando passar o mouse sobre uma imagem, precisará colocá-la em torno de um contêiner. css:

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

.brand-sales {
    display: none;
}

Se você passar o mouse sobre isso:

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

Isso mostrará:

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