CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Paul
Paul

Reputation: 3368

Adding class on hover

I am having some issues adding a class on hover. I have the basics of it down, but my end result isn't what I am looking for.

On hover over profile-pic-container I am looking for the profile-pic-hover to only come up 30% of the height, from the bottom of profile-pic-container. Also I cannot figure out how to set the #profile-pic-change to display on this hover as well.

What am I doing wrong?

$('#profile-pic-container').hover(
       function(){ $(this).addClass('profile-pic-hover') },
       function(){ $(this).removeClass('profile-pic-hover') }
)
#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%;
	width: 100%;
	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>

Upvotes: 0

Views: 2408

Answers (3)

Aqueel Aboobacker VP
Aqueel Aboobacker VP

Reputation: 366

You can achieve this by using only CSS, with transition property. change profile pic link can be displayed using hover property

#profile-pic-container {
	position: relative;
	width: 200px;
  height: 200px;
  border: 1px solid black;
	cursor: pointer;
  transition: height 1s;
}	
.profile-pic-hover {
	background: rgba(0, 0, 0, 0.5);
	height: 30%;
	width: 100%;
	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>

Upvotes: 0

user4994625
user4994625

Reputation:

id selector is more specific than class selector, for overwrite the properties you can add the id selector to the class or add !important keyword:

#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;
}

With !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;
}

Upvotes: 1

epascarello
epascarello

Reputation: 207501

You need to add another rule to set it to be visible.

.profile-pic-hover #profile-pic-change {
  display: none;
  color: #fff;
}

but there is no reason to use JavaScript here simple :hover in the CSS and you can style the elements.

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

Upvotes: 1

Related Questions