Klasse beim Schweben hinzufügen

Question

Ich habe einige Probleme beim Hinzufügen einer Klasse bei Hover. Ich habe die Grundlagen davon, aber mein Endergebnis ist nicht das, wonach ich suche.

Auf schweben über profile-pic-container Ich bin für die profile-pic-hover auf nur 30% der Höhe kommt, von der Unterseite der profile-pic-container. Auch kann ich nicht herausfinden, wie man die #profile-pic-change auf diesem Hover auch einstellen soll.

Was mache ich falsch?

$('#profile-pic-container').hover(
 
     function(){ $(this).addClass('profile-pic-hover') }, 
 
     function(){ $(this).removeClass('profile-pic-hover') } 
 
)

#profile-pic-container { 
 
\t position: relative; 
 
\t width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
\t cursor: pointer; 
 
} \t 
 
.profile-pic-hover { 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t height: 30%; 
 
\t width: 100%; 
 
\t bottom: 0; 
 
} 
 
#profile-pic-change { 
 
    display: none; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="profile-pic-container"> 
 
    <div id="profile-pic-change">Change picture</div> 
 
</div>

Answer 1

Sie benötigen eine weitere Regel hinzufügen, um es einzustellen sichtbar zu sein.

aber es gibt keinen Grund, JavaScript hier einfach zu verwenden: Hover in der CSS und Sie können die Elemente stylen.

#profile-pic-container { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
#profile-pic-container:hover { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
#profile-pic-change { 
 
    display: none; 
 
    color: #fff; 
 
} 
 
#profile-pic-container:hover #profile-pic-change { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="profile-pic-container"> 
 
    <div id="profile-pic-change">Change picture</div> 
 
</div>

Answer 2

id Selektor ist spezifischer als class Selektor für überschreiben die Eigenschaften, die Sie die ID-Selektor zur Klasse hinzufügen oder !important Stichwort hinzufügen:

#profile-pic-container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    cursor: pointer; 
} 
#profile-pic-container.profile-pic-hover { 
    background: rgba(0, 0, 0, 0.5); 
    height: 30%; 
    width: 100%; 
    bottom: 0; 
} 
#profile-pic-change { 
    display: none; 
    color: #fff; 
} 

Mit !important:

#profile-pic-container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    cursor: pointer; 
} 
.profile-pic-hover { 
    background: rgba(0, 0, 0, 0.5); 
    height: 30% !important; 
    width: 100% !important; 
    bottom: 0; 
} 
#profile-pic-change { 
    display: none; 
    color: #fff; 
} 

Answer 3

Sie können dies erreichen, indem Sie nur CSS mit Übergangseigenschaft verwenden. ändern können profile pic Link angezeigt werden, mit Hover-Eigenschaft

#profile-pic-container { 
 
\t position: relative; 
 
\t width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
\t cursor: pointer; 
 
    transition: height 1s; 
 
} \t 
 
.profile-pic-hover { 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t height: 30%; 
 
\t width: 100%; 
 
\t bottom: 0; 
 
} 
 

 
#profile-pic-change { 
 
    display: none; 
 
    color: #fff; 
 
} 
 
#profile-pic-container:hover { 
 
    height: calc(200px*(30/100)); 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
#profile-pic-container:hover #profile-pic-change { 
 
    display: block; 
 
}

<div id="profile-pic-container"> 
 
    <div id="profile-pic-change">Change picture</div> 
 
</div>