Question

我做网络开发是一种爱好，我遇到了项目的问题。

我正在尝试将图片悬停在文字上，但我只能将其用于处理某些图片。我在this link中提供了我的html和css。我要做的是将页面顶部的5个图像的CSS效果应用到左下角的图像。唯一的区别是我希望女人淡入红色（＃800000），而不是白色。我真的很感激任何帮助。

Answer 1

使用

a:hover #redInfo{
  opacity: 0.50;
}

您无法使用：悬停在#rowImage上，因为#redInfo不是图片的子项。

另外，请考虑更多地关注使用ID而不是ID。

Answer 2

我稍微更新了你的CSS，包括：将鼠标悬停在a上，然后将样式应用于div（img和info）。我也更新了你的过渡。

尝试在#firstRow选择器之后应用它并替换它下面的所有内容：

#firstRow a { display: block; }

#rowImage{
  -webkit-transition: all 1.0s ease;
   -moz-transition: all 1.0s ease;
    -ms-transition: all 1.0s ease;
     -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
  opacity: 1;
 }

#redInfo {
  text-align:center;
  font-size:24px;
  opacity: 0;
  color: #000000;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 540px;
  height:753px;
  z-index: 2;
  background: #800000;
  -webkit-transition: all 1.0s ease;
   -moz-transition: all 1.0s ease;
    -ms-transition: all 1.0s ease;
     -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
}

 a:hover > #redInfo { 
opacity: 0.5;
}

将鼠标悬停在文本上可以在一个图像上工作但不能在另我提供了CodePen

2 个答案: