Html 悬停不工作时图像阴影会发生变化_Html_Css

Html 悬停不工作时图像阴影会发生变化

html css

Html 悬停不工作时图像阴影会发生变化,html,css,Html,Css,我试图让图像在悬停时稍微变红。我已经设法将不透明度从0.8更改为1.0，并在悬停时稍微放大，但我不知道为什么图像没有稍微变红。失败的代码是： background-color: rgba(110,0,0,.5); 有人能告诉我我做错了什么吗？谢谢你的帮助，谢谢。子节父级{ 宽度：286px；高度：自动；右边距：51px；浮动：左； } .老大哥{ 宽度：282px；高度：282px；边框：2px实心#2778BA；溢出：隐藏；边缘底部：50px； } .儿童款{ 宽度：100

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

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

有人能告诉我我做错了什么吗？谢谢你的帮助，谢谢

。子节父级{
宽度：286px；
高度：自动；
右边距：51px；
浮动：左；
}
.老大哥{
宽度：282px；
高度：282px；
边框：2px实心#2778BA；
溢出：隐藏；
边缘底部：50px；
}
.儿童款{
宽度：100%；
身高：100%；
不透明度：0.8；
}
.子项：悬停{
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
不透明度：1；
/*成长*/
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
/*下面的方法不起作用*/
背景色：rgba（110,0,0,5）；
}
.大象{
背景：url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

因为

背景色

用于已为全尺寸宽度/高度的

背景图像

。使用伪元素或其他html元素作为背景色

这里有一个例子

。子节父级{
宽度：286px；
高度：自动；
右边距：51px；
浮动：左；
}
.老大哥{
宽度：282px；
高度：282px；
边框：2px实心#2778BA；
溢出：隐藏；
边缘底部：50px；
}
.儿童款{
宽度：100%；
身高：100%；
不透明度：0.8；
}
/*范例*/
.子节：悬停：之前{
内容：''；
显示：块；
宽度：100%；
身高：100%；
/*下面的方法不起作用*/
背景色：rgba（110,0,0,5）；
}
.子项：悬停{
-webkit转换持续时间：0.4s；
/*狩猎*/
过渡时间：0.4s；
不透明度：1；
/*成长*/
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.大象{
背景：url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

因为

背景色

用于已为全尺寸宽度/高度的

背景图像

。使用伪元素或其他html元素作为背景色

这里有一个例子

。子节父级{
宽度：286px；
高度：自动；
右边距：51px；
浮动：左；
}
.老大哥{
宽度：282px；
高度：282px；
边框：2px实心#2778BA；
溢出：隐藏；
边缘底部：50px；
}
.儿童款{
宽度：100%；
身高：100%；
不透明度：0.8；
}
/*范例*/
.子节：悬停：之前{
内容：''；
显示：块；
宽度：100%；
身高：100%；
/*下面的方法不起作用*/
背景色：rgba（110,0,0,5）；
}
.子项：悬停{
-webkit转换持续时间：0.4s；
/*狩猎*/
过渡时间：0.4s；
不透明度：1；
/*成长*/
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.大象{
背景：url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}

你可以试试这个

给

.subsection big brother

一个背景色。将不透明度设置为0。在这里也添加一个转换属性

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

将鼠标悬停在

.bigbrother

上时，将不透明度更改为1-基本上将该div变为红色

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

您可以通过调整悬停时

.subsection child

的不透明度来决定要在上面看到多少图像

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

。子节父级{
宽度：286px；
高度：自动；
右边距：51px；
浮动：左；
}
.老大哥{
宽度：282px；
高度：282px；
边框：2px实心#2778BA；
溢出：隐藏；
边缘底部：50px；
背景色：rgba（110,0,0,0）；
过渡：.4s；
}
.大哥：悬停{
背景色：rgba（110,0,0,1）；
}
.儿童款{
宽度：100%；
身高：100%；
不透明度：0.8；
过渡：.4s；
}
.子项：悬停{
不透明度：.5；
/*成长*/
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
/*下面的方法不起作用*/
}
.大象{
背景：url(http://cdn.publishyourarticles.net/wp-content/uploads/2015/07/elephants-9a.jpg);
}