在悬停时添加类答案

【问题标题】：Adding class on hover在悬停时添加类
【发布时间】：2016-10-31 16:05:01
【问题描述】：

我在添加悬停类时遇到了一些问题。我已经掌握了它的基础知识，但我的最终结果并不是我想要的。

悬停在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>

【问题讨论】：

为什么要使用 JavaScript？ #profile-pic-container:hover {}
profile-pic-hover 和 profile-pic-container 也是同一个元素，所以...... 从 profile-pic-container 的底部开始，只出现 30% 的高度 .... 不会像您想象的那样使用您的实际 css 代码
那我该怎么做才能让它只上升 30%。
jsfiddle.net/vfbpoefm
@DaniP 这太完美了！留下答案。

标签： javascript jquery html css hover

【解决方案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>

【讨论】：

如何让黑色背景元素只达到容器高度的 30%？

【解决方案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;
}

【讨论】：

如果您可以控制所有 css，则永远不需要和使用 !important。您应该仅在不得已的情况下使用!important，但请始终牢记这是一个可疑的解决方案。即使您无法控制所有 css 代码，也可以专门使用例如aID 前缀应该可以解决大多数问题。 !important 大部分时间只有在您需要处理无法更改且已使用 !important 的 css 代码时才需要

【解决方案3】：

您可以通过仅使用带有过渡属性的 CSS 来实现此目的。可以使用 hover 属性显示更改个人资料图片链接

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

【讨论】：