3

Eu tenho uma div que faz parte de um link que estão dentro de outra div, eu queria que se ele passasse o cursor em qualquer parte da div o houver se aplicasse tanto no texto do link quanto na div de dentro.

O hover está funcionando só que separado e não consigo de jeito nem um fazer os dois funcionar juntos.

Alguém tem uma ideia de como faço isso?

.pokeBolaIn{
	background:grey; 
	color:black; 
	border-radius:100px; 
	height:20x; 
	width:20px;
	text-align: center;
	float: left;
}

.pokeBolaOut{
	position:absolute;
}

.pokeBolaOut a{
	color: black;
  text-decoration: none;
}

.pokeBolaOut a:hover{
	color: red;
}

.pokeBolaOut a .pokeBolaIn:hover{
	background:red; 
	color:white; 
}
<div class="pokeBolaOut">
 <a href="#"><div class="pokeBolaIn">+</div>Confira nosso portifólio</a>
</div>

2 Respostas 2

4

Faça as seguintes correções na forma como você aplica o :hover. E troquei a sua div interna por um span.

.pokeBolaIn {
  background: grey;
  color: black;
  border-radius: 100px;
  height: 20x;
  width: 20px;
  text-align: center;
  float: left;
}

.pokeBolaOut {
  position: absolute;
}

.pokeBolaOut a {
  color: black;
  text-decoration: none;
}

.pokeBolaOut:hover a {
  color: red;
}

.pokeBolaOut:hover .pokeBolaIn {
  background: red;
  color: white;
}
<div class="pokeBolaOut">
  <a href="#"><span class="pokeBolaIn">+</span>&nbsp;Confira nosso portifólio</a>
</div>

5
  • Funcionou perfeitamente, obrigado! 29/06/2017 às 16:08
  • Na verdade foi só adicionar o css que funcionou com a div. 29/06/2017 às 16:10
  • @JeffersonHillebrecht É apenas esquisito pra mim colocar uma divdentro de um a. E não posso te confirmar, mas me parece errado. 29/06/2017 às 16:13
  • Estou limitado por um css feito antes, o qual se aplica aos spans e não fica o efeito que eu quero, por isso não pude usa-lo. :/ 29/06/2017 às 16:14
  • @LeonFreire é esquisito, mas a partir do HTML 5 começou a ser permitido elementos block dentro de um elemento a se o elemento pai deste permite elementos block. Antes do HTML 5 seria errado, sim, utilizar uma div dentro de um a. Vide recomendação W3C.
    – Woss
    29/06/2017 às 16:18
1

Estava respondendo, mas já foi explicado pelo Leon na resposta dele, basta definir para regra de :hover ser aplicada quando acontecer no elemento .pokeBolaOut.

Mas não é necessário o uso de tantos elementos para esse efeito. Como o ( + ) é só um componente visual e não agrega valor para a página, pode ser um elemento criado com o ::before do <a>.

a::before {
  align-items: center;
  background: gray;
  border-radius: 50%;
  content: '+';
  display: inline-flex;
  height: 20px;
  justify-content: center; 
  margin-right: .5%;
  width: 20px
}

a {
  color: black;
  text-decoration: none
}

a:hover {
  color: red
}

a:hover::before {
  background: red;
  color: #fff
}
<a href='#'>Confira nosso portfólio</a>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .