Question

我在悬停时添加一个类有一些问题。我有它的基础知识，但我的最终结果不是我想要的。

将鼠标悬停在profile-pic-container上方时，我正在寻找profile-pic-hover仅从profile-pic-container底部出现高度的30％。此外，我无法弄清楚如何设置#profile-pic-change以显示此悬停。

我做错了什么？

$('#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>

Answer 1

您需要添加其他规则以将其设置为可见。

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

但是没有理由在这里简单地使用JavaScript：将鼠标悬停在CSS中，你可以设置元素的样式。

#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选择器比class选择器更具体，用于覆盖您可以将ID选择器添加到类或添加!important关键字的属性：

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

使用!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

您可以通过仅使用具有transition属性的CSS来实现此目的。可以使用悬停属性

显示更改配置文件图片链接

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

在悬停时添加课程

3 个答案: