Roberto Sepúlveda Roberto Sepúlveda - 13 days ago 5
CSS Question

How to change css properties on hover parent element?

I have this table:

<table>
<tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr>
<tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Dad </td></tr>
</table>


And I want to show that Icon on class "momdad" hover, because is actually hidden, as you can see in this css:

i{
visibility: hidden;
}


Is possible to make something like this?:

.momdad:hover{
i{
visibility: visible;
}
}


Thanks for your time.

Answer

much more simple just try

.momdad:hover i {
    visibility: visible; 
}

example here:

.momdad i {
  background-color: orange;
  visibility: hidden;
}
.momdad:hover i {
    visibility: visible; 
}
<table>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'>icon</i> Hello </td><td> Mom </td></tr>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'>icon</i> Hello </td><td> Dad </td></tr>
</table>

Comments