Wie ändert man die CSS-Eigenschaften auf dem übergeordneten Element?

Question

Ich habe diese Tabelle:

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

Und ich möchte, dass die Ikone auf Klasse zeigen „momdad“ schweben, denn eigentlich verborgen ist, wie Sie in diesem css sehen:

i{ 
    visibility: hidden; 
} 

ist möglich So etwas zu machen ?:

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

Danke für Ihre Zeit.

Answer 1

viel einfacher nur versuchen,

.momdad:hover i { 
    visibility: visible; 
} 

Beispiel hier:

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

Answer 2

CSS-Selektoren können durch die Verkettung des Hierachie der Elemente, die Sie auswählen möchten verwendet werden. Zum Beispiel:

div a i wird eine i -elementigen innerhalb eines a -elementigen in einem div -elementigen wählen.

Für Ihren Code wäre dies der richtige Selektor: .momdad i. Beachten Sie, dass dies ALL i innerhalb .momdad nicht nur das direkte untergeordnete Element auswählt. Verwenden Sie .momdad > i, um nur das direkte Kind auszuwählen. Eine weitere Erklärung: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 3

Ja, es ist möglich, mit reinem CSS:

.momdad:hover i{visibility :visible } 

mit CSS, wenn Sie auf ein Element schweben, können Sie das Element beeinflussen selbst oder seine Kinder oder nächsten Geschwister und ihre Kinder.

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>

Answer 4

Ja ist es möglich, untergeordnetes Element auf schweben von Elternelement

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>