我试图让图像在鼠标悬停时稍微变红。我设法让不透明度从 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>
最佳答案
你可以试试这个...
给 .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>
关于html - 悬停时图像阴影变化不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41914028/