Question

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

我所拥有的是宽度为100％的div（容器）并且包含div内部的4个图像，每个25％（网格），内部（上）的描述层 - 称为desc，用于整体单纯文本的尺寸和跨度。

这是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

如果您的描述是图像的后续兄弟，您可以使用以下的兄弟选择器：

constructor(props) {
     super(props);
     this.state = {
         foo: ''
     }
}
componentWillMount(){
    if (this.props.foo === 'bar') {
          this.setState({foo: 'bar'});
    } else {
         this.setState({foo: 'notBar'});
    }
}
componentWillReceiveProps(nextProps){
   if (nextProps.foo === 'bar') {
          this.setState({foo: 'bar'});
    } else {
         this.setState({foo: 'notBar'});
    }
}

（一旦鼠标悬停在图像上，选择带有.grid img:hover + .descr{display: block; background: whatever;}的元素）

用于此工作的HTML结构：

class="descr"

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

2 个答案: