CODEWITHSUNDEEP
htmlcss
Roberto Sepúlveda
Roberto Sepúlveda

Reputation: 415

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.

Upvotes: 0

Views: 67

Answers (4)

DigitCart
DigitCart

Reputation: 3000

Yes, It's possible with pure css:

.momdad:hover i{visibility :visible }

With css when you hover on an element, you can affect that element itself or its children or next siblings and their children.

span {
  background-color: gold;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  width: 20px;
}
div {
  float: left;
  margin: 0 3px;
  width: 20px;
}
div:hover span,
div:hover ~ div span {
  background-color: orange;
}
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

Upvotes: 0

NikxDa
NikxDa

Reputation: 4187

CSS selectors can be used by chaining the hierachy of the elements you want to select. For example:

div a i will select an i-element inside an a-element inside a div-element.

For your code, this would be the proper selector: .momdad i. Note that this will select ALL i inside .momdad, not just the direct child element. Use .momdad > i to only select the direct child. Further explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

Yes, it is possible to display child element on hover of parent element

i{
  visibility: hidden;
}
.momdad:hover i{
  visibility: visible;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Upvotes: 1

caramba
caramba

Reputation: 22480

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>

Upvotes: 2

Related Questions