Question

我遇到以下代码的问题：

<div class="background">
  <div class="img-content">
    <p>Some text here...</p>
  </div>
  <img src="the_image.png" class="img-class">
</div>

当我将鼠标悬停在图像顶部时，带有img-content类的div显示在图像的顶部。同时我对图像应用了不透明度，因此我显示了隐藏的背景以产生一些色彩效果。

CSS如下：

.background {
  height:100px;
  width:100px;
  background-color: blue;
  position:relative;
  } 

div.img-content {
  position:absolute;
  top:20px;
  color:white;
  display:none;
}

.background:hover div.img-content {
  position:absolute;
  top:20px;
  color:white;
  display:block;
}

img.img-class {
  opacity:0.3;
}

使用当前的HTML，当我将鼠标悬停在图像顶部时，除了不透明度在div.img-content

上显示之外，所有内容都会根据规格显示

当我颠倒div.background（代码跟随）中元素的顺序时，所有内容都显示为规范，除非我将鼠标悬停在div.img-content之上，然后图像的opcity返回到1 （而不是0.3）

<div class="background">
  <img src="the_image.png" class="img-class">
  <div class="img-content">
    <p>Some text here...</p>
  </div>
</div>

所以现在，我的想法是当我将鼠标悬停在div.img-content（对于上面的代码）的顶部时，在图像上应用不透明度0.3。或者，可以应用于问题的第一个HTML代码的任何其他解决方案。仅限CSS！

谢谢！

在将鼠标悬停在当前元素上之前，如何为元素应用某种样式

0 个答案: