html - 悬停时图像阴影变化不起作用

Question

我试图让图像在鼠标悬停时稍微变红。我设法让不透明度从 0.8 变为 1.0，并在悬停时稍微放大，但我不知道为什么图像没有变红。失败的代码是:

background-color: rgba(110,0,0,.5);

任何人都可以建议我在这里做错了什么吗？感谢任何帮助，谢谢

.subsection-parent{
	width:286px;
	height:auto;
	margin-right:51px;
	float:left;
}
.subsection-big-brother{
	width:282px;
	height:282px;
	border:2px solid #2778BA;
	overflow:hidden;
	margin-bottom:50px;
}
.subsection-child{
	width:100%;
	height:100%;
	opacity:0.8;
}
.subsection-child:hover {
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	opacity: 1;
	/* GROW! */
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
  /* The below does not work */
  background-color: rgba(110,0,0,.5);
}
.elephant{
	background:url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

<div class="subsection-parent">
<a href="#">
<div class="subsection-big-brother">
<div class="subsection-child elephant"></div>
</div>
<h3>H3 Text</h3></a>
</div>

Answer 1

你可以试试这个...

给 .subsection-big-brother 一个背景色。将不透明度设置为 0。在这里也添加一个过渡属性。

.subsection-big-brother {
  background-color: rgba(110, 0, 0, 0);
  transition: .4s;
}

当您将鼠标悬停在 .subsection-big-brother 上时，将不透明度更改为 1 - 实质上是将该 div 变为红色。

.subsection-big-brother:hover {
  background-color: rgba(110, 0, 0, 1);
}

您可以通过在悬停时调整 .subsection-child 的不透明度来决定您希望在此之上看到多少图像。

.subsection-child:hover {
  opacity: .5;
}

.subsection-parent {
  width: 286px;
  height: auto;
  margin-right: 51px;
  float: left;
}
.subsection-big-brother {
  width: 282px;
  height: 282px;
  border: 2px solid #2778BA;
  overflow: hidden;
  margin-bottom: 50px;
  background-color: rgba(110, 0, 0, 0);
  transition: .4s;
}
.subsection-big-brother:hover {
  background-color: rgba(110, 0, 0, 1);
}
.subsection-child {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: .4s;
}
.subsection-child:hover {
  opacity: .5;
  /* GROW! */
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  /* The below does not work */
}
.elephant {
  background: url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

<div class="subsection-parent">
  <a href="#">
    <div class="subsection-big-brother">
      <div class="subsection-child elephant"></div>
    </div>
    <h3>H3 Text</h3>
  </a>
</div>