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：hover在此代码中不起作用

1 个答案: