Question

我有这段代码：

<div class="link" id="link1">
    <h1>Lorem Ipsum</h1>
</div>
<div class="link" id="link2">
    <h1>Lorem Ipsum</h1>
</div>

.link{
    display: inline-block;
    width: 100%;
    height: 50%;
    float: left;
    transition:0.25s;
}
.link:hover {
    background: linear-gradient(
      rgba(0, 0, 0, 0.25), 
      rgba(0, 0, 0, 0.25));
    transition:0.25s;
}

当你将鼠标悬停在它上面时，这会使.link变暗，但我很想知道是否可以添加过渡到它。

编辑：我应该首先明确这一点。我有多个链接，当你将鼠标悬停在它上面时，我想让它们全部转换为自己颜色的深色版本。我已经更新了之前的小提琴。

Jsfiddle：http://jsfiddle.net/rpo12dhx/5/

Answer 1

如果您只想在:hover上转换为较暗的颜色，则不需要linear-gradient。你可以简单地过渡到更深的颜色。

另外，您没有指定transition-property（即background）。

.link {
  display: inline-block;
  width: 100%;
  height: 50%;
  background: #394053;
  transition: background 0.8s;
}
.link:hover {
  background: #172032;
}

<div class="link" id="link1">
  <h1>Lorem Ipsum</h1>
</div>

Answer 2

这里有你的小提琴更新

JS FIDDLE

取出了id选择器，并将BG颜色添加到主选择器，也不要认为你可以使用：不要伪装上：hover pseudo将其作为红色突出显示效果

＆＃13;

.link{
	display: inline-block;
	width: 100%;
	height: 50%;
	float: left;
	transition:background-color 1s;
    -webkit-transition:background-color 1s;
    	background-color: #394053;
}

.link:hover {
	background-color:red;
	
}

＆＃13;

<div class="link" id="link1">
	<h1>Lorem Ipsum</h1>
</div>

＆＃13;

Answer 3

试试这个：

DEMO

＆＃13;

.link {
  display: inline-block;
  width: 100%;
  height: 50%;
  float: left;
  transition: 0.25s;
  background: red;
}
.link:hover {
  background: darkred;
}

＆＃13;

<div class="link" id="link1">
  <h1>Lorem Ipsum</h1>
</div>

＆＃13;

注意，颜色可以是您选择的任何颜色。（并且可以通过更改transition值来加速/减慢速度） - 几乎不需要为此包含vendor prefixes

<强> NB

我看到所有当前答案都删除了你的:not(hover)部分。这是因为特异性。把它想象成＆＃34;更具体的＆＃34;，更重要的＆＃34;。

因此，当.link悬停时，.link:hover会覆盖{{1}}，因为更具体比普通＆＃34; .link＆＃34;和因此我们不需要包括它。

如何在悬停过渡时使元素变暗？

3 个答案: