Question

我似乎无法在悬停时轻松获取我的伪元素。我不确定我的CSS有什么问题。我不能改变HTML，因为它在Drupal中。 Fiddle

＆＃13;

.portfolio-image {
  position: relative;
  background: none;  
}
.portfolio-image a {
    background: none;
}
.portfolio-image:hover a:before {
  content: "\f002";
  font-family: 'FontAwesome';
  color: yellow;
  position: absolute;
  padding-top: 25%;
  padding-left: 45%;
  font-size: 5em;
  line-height: 0em;
  height: 100%;
  width: 100%;
  max-width: 1280px;
  background: rgba(0, 0, 0, 0.7);
  transition: 0.7s ease;
  -webkit-transition: 0.7s ease;
  -moz-transition: 0.7s ease;
}
.portfolio-image img {
  width: 100%;
  height: auto;
  max-width: 1280px;
}

＆＃13;

     <div width="500px";> <div class="portfolio-image"><a href="http://iTreeLessons.com"><img typeof="foaf:Image" src="http://staging.edcupaioli.com/sites/default/files/Home%20%20%20iTree%20Lesson%20Plans.png" alt="" height="705" width="1280"></a></div>    </div>

＆＃13;

Answer 1

我明白了。 smnbbrv在创建没有悬停的伪元素时是正确的，然后添加转换。我使伪元素的不透明度为0以使其隐藏，然后在悬停时使用过渡效果调用不透明度为1。

.portfolio-image {
  position: relative;
}
.portfolio-image a:before {
  content: "\f14c";
  font-family: 'FontAwesome';
  position: absolute;
  color: yellow;
  padding-top: 25%;
  padding-left: 45%;
  font-size: 5em;
  line-height: 0em;
  height: 100%;
  width: 100%;
  max-width: 1280px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.portfolio-image a:hover:before {
  opacity: 1;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
.portfolio-image img {
  width: 100%;
  height: auto;
  max-width: 1280px;
  z-index: 0;
}

<div class="portfolio-image">
  <a href="http://symantecinnovationawards.com/">
    <img typeof="foaf:Image" src="http://staging.edcupaioli.com/sites/default/files/Award%20Details%20%20%20Symantec%20Innovation%20Awards.png" width="1280" height="626" alt="">
  </a>
</div>

过渡CSS伪元素

1 个答案: