CSS Div do tamanho do texto.

IagoTM · 7 de novembro de 2018

Galera estou com um problema! Estou tentando fazer com que ao dar o hover em um link ele mostre um texto abaixo falando sobre o que ele é.

Mais quero que somente quando eu passe o mouse sobre o link ele mostre o texto… Mais ao colocar ele dentro de uma div quando passo o mouse sobre a parte branca ele fica mostrando o texto do hover! Queria que a div tenha o mesmo tamanho do texto para não ter esse problema e que seja um modo que qualquer texto que eu use a div fique do tamanho dele sem que eu tenha que fazer na mão para cada link! Se alguém souber um modo!

<div class="some-div">
    <a href="">Competências</a>
        <p class="some-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Maecenas id vulputate augue. Donec varius arcu in massa lobortis, 
          eu elementum nunc pharetra. Etiam eget odio ut libero semper ultrices ut nec lorem.
        </p>

</div>

.some-element {
  border: 1px solid #ccc;
  display: none;
  font-size: 10px;
  margin-top: 10px;
  padding: 5px;
  text-transform: uppercase;
  
}
.some-div:hover p {
  display:block; 
}

makotsunami · 7 de novembro de 2018

Salve salve!

https://codepen.io/jhonnyizidoro/pen/QJyMKK

Muito simples. As divs são elementos com display block por default, ou seja, ela sempre vai ocupar 100% da largura do elemento pai. Basta adicionar o código abaixo no seu CSS.

.some-div {
  display: inline;
}

@EDIT: CSS é uma linguagem muito peculiar. Ninguém acha que é difícil, mas é. É necessário muita experiência para dominar, sério! Eu sei o arroz com feijão. hehe XD

Tem que meter bastante a mão na massa pra pegar o jeito.