悬停时图像灰度 + <p> 仅在悬停时可见

Question

我想同时实现我在标题中写的内容。

我有一个 div，它是 width:100%（容器）并且在 div 中包含 4 个图像，每个 25%（网格），带有一个描述层在它的内部（上）- 称为 desc，表示整体尺寸，称为 span，表示纯文本。

这里是 CSS:

.grid-container {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}
.grid {
    width: 25%;
    float: left;
    position: relative;
}

.grid img {
    border-radius: 50%;
    transition: .4s -webkit-filter linear;
    -webkit-transition: background .5s ease 50ms;
    transition: background .5s ease 50ms;
}

.grid img:hover {
    filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
  background: rgba(168, 202, 217, .6)
}

.desc {
    display: block;
    position: absolute;
    left: 26%;
    width: 87%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;

}

.desc:hover {
    background: rgba(168, 202, 217, .6)
}

.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}

.desc span:hover {
    opacity: 1;
}

因此，我想要实现的是在鼠标悬停时使图像变为灰度，同时使描述可见。描述也有背景颜色（我可以将其与灰度滤镜一起应用于图像吗？）问题是这种方式的描述占据了整个图像，所以悬停只会被描述而不是图像考虑。

关于我如何实现我想要的目标的任何线索？感谢您的关注

此致

Answer 1

简单，将两个元素放在同一个容器中。例如，

.grid:hover img {
  filter: url(filters.svg#grayscale);
}

.grid:hover .desc span {
  opacity: 1;
}

Answer 2

如果您的描述是图片的紧随其后的同级图像，您可以使用紧随其后的同级图像选择器：

.grid img:hover + .descr{display: block; background: whatever;}

（鼠标悬停在图像上时选择带有 class="descr" 的元素）

HTML 工作结构：

<div>
    <img>
    <p class="descr">
</div>

悬停时图像灰度 + <p> 仅在悬停时可见

Image greyscale on hover + <p> visible only on hover

image

css

hover

mouseover