css：悬停在此代码中不起作用

Question

我正在尝试将 figcaption 放在 figure 上，所以我使用 :hover 来做到这一点，但它不起作用，这是 HTML:

<section class="portfolio">
        <figure class="four columns all illustrations" data-category="illustrations">
            <img src="http://placehold.it/220x220" alt="This is 1st portfolio thumbnail.">
            <figcaption>
                <h4>Lorem Ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Morbi molestie lobortis magna eget sagittis.</p>
            </figcaption>
        </figure>

这是我的 css:

.portfolio figcaption {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  padding: 10%;

  background-color: rgba(58,63,67,.8);

  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);

  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms;
}
.portfolio figure:hover  figcaption {
  -webkit-transform: tranlateX(0);
  -moz-transform: tranlateX(0);
  -ms-transform: tranlateX(0);
  transform: tranlateX(0);

  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms;
}

我错过了什么地方，我该如何解决？

Answer 1

它有效，但你拼错了 translateX。将 tranlateX 更改为 translateX。

此外，无需在 :hover 中重新声明过渡属性。

改变

.portfolio figure:hover  figcaption {
  -webkit-transform: tranlateX(0);
  -moz-transform: tranlateX(0);
  -ms-transform: tranlateX(0);
  transform: tranlateX(0);

  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms;
}

到

.portfolio figure:hover figcaption {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

css：悬停在此代码中不起作用

css :hover is not working in this code

html

css

hover

pseudo-class

css-transforms