Question

解决方案可能非常简单但是啊，我无法得到它。我有一个文本div，它放在图像的同一位置。应该发生的事情是，图像应该淡出，使文本更加明显。但唯一的一点是，我希望隐藏文本，并且只有当用户将鼠标悬停在图像/ div文本框上时才能显示文本。我尝试了一些像

这样的东西

.display {
visibility: hidden;
}

img.artwork:hover + .display {
visibility: visible; 
}

但这不起作用，因为它只是开始出现故障。我也不能使用z-index，因为图像和div文本都不在位置：绝对或位置：相对。有想法该怎么解决这个吗？这就是我现在所拥有的：

img.albumartwork:hover{
        opacity: .15;
        -webkit-transition: all 0.4s ease 0s;
    }


.display {

    font-size: 12px;
    font-weight: bold;
    width: 120px;
    height: 120px;
    color: rgb(220,221,229);
    text-align: center;
    margin-top: -120px;
    margin-left: 52.5px;
    background-color: rgba(0,0,0,0.6);

}

Answer 1

尝试在:hover

上定位颜色属性

SAMPLE

div {     
  color: transparent;
  transition: 0.5s all ease ;
}

div:hover {  
  color: black;  
}

div:hover img {
  opacity: 0;
}

img {
  width: 150px;
  transition: 0.5s all ease ;
  position: absolute;
  left: 0;
}

使文字显示在褪色图像的顶部

1 个答案: