Hover div within div

Question

Hover div within div

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

I have a div that is part of a link that is inside another div, I wanted it if it passed the cursor anywhere in the div, if it applied to both the link text and the div from within.

The hover is working only as separate and I can not manage to make the two work together.

Does anyone have an idea how I can do this?

.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

asked by anonymous 29.06.2017 / 18:00

2 answers

1

I was responding, but it has already been explained by Leon in the response , just set it to rule of :hover be applied when it happens in the .pokeBolaOut element.

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

29.06.2017 / 18:16

Are Java lambdas equivalent to JavaScript Closures? Reverse a git reset hard

score 4 · Accepted Answer

Make the following corrections in the way you apply :hover . And I switched its% internal% by div .

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