Hover div inside div

Asked

Viewed 711 times

3

I have a div that is part of a link that are inside another div, I wanted if it passed the cursor in any part of the div there is apply both in the text of the link and the inside div.

The Hover is working only separately and I can’t even get one to make the two work together.

Does anyone have any idea how I do it?

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

html css

2 answers

4


Make the following corrections to how you apply the :hover. And I switched yours div internal by a 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>

  • It worked perfectly, thank you!

  • Actually it was just adding the css that worked with div.

  • @Jeffersonhillebrecht It’s just weird for me to put one divwithin a a. And I can’t confirm it, but it feels wrong.

  • I am limited by a css done before, which applies to spans and does not get the effect I want, so I could not use it. :/

  • @Leonfreire is weird, but from HTML 5 elements began to be allowed block within an element a if the parent element of this allows elements block. Before HTML 5 it would be wrong, yes, to use a div within a a. Vide recommendation W3C.

1

I was answering, but it’s already been explained by Leon at reply from it, just set to rule :hover be applied when it happens in the element .pokeBolaOut.

But it is not necessary to use so many elements for this purpose. Such as the ( + ) is only a visual component and does not add value to the page, it can be an element created with the ::before of <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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.