Sergio R Sergi Sergio R Sergi - 2 months ago 8
CSS Question

change color links inside div when mouseover div

I try change color links inside div , when i put cursor inside div , but i can´t get results

#pag_number
{
float:left;
position:relative;
width:40px;
height:40px;
line-height:40px;
margin-right:3px;
font-family:Arial;
font-size:18px;
color:#fff;
text-align:center;
background-color:#111;
}

#pag_number a:hover
{
font-weight:bold;
text-decoration:none;
color:#A9A713;
}


HTML :

<div id="pag_number"><a href="#1">1</a></div>


I try using the css i put until , but no get works and never when i put my cursor over the div called pag_number get change color links inside

Thank´s for help , regards

Answer

If you want to change color of child element while hovering parent you need to set css in this format parent:hover > child in your case #pag_number:hover a

#pag_number {
  float: left;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 3px;
  font-family: Arial;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background-color: #111;
}
#pag_number:hover a {
  font-weight: bold;
  text-decoration: none;
  color: #A9A713;
}
<div id="pag_number"><a href="#1">1</a>
</div>