Question

我想在伪元素上创建淡入淡出效果但由于我无法在此元素上使用javascript而遇到困难。

我有一个类似于我在这里尝试做的事情的例子，但我不能让元素淡入，因为在创建元素时转换似乎不起作用。

.hoverhere.dim::before {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.8);
    opacity: 1;
    transition: opacity 1s;
 }

我正在为div添加一个类，以便在与上面的css匹配后创建伪元素，但无法解决如何为此设置动画。

如果没有像下面这样的伪造元素，我可以让它工作：

https://codepen.io/anon/pen/Oxwzvv

但是想知道是否有办法在不改变我的标记的情况下包含空div。

Answer 1

我猜你说你想要这个？

$('.hoverhere')
  .mouseenter(function() { $(this).addClass('dim'); })
  .mouseleave(function() { $(this).removeClass('dim'); });

.hoverhere {
  width: 100%;
  height: 40px;
  background: red;
  color: white;
  text-align: center;
}

.hoverhere::before {
  content: '\A';
  position: absolute;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-out;
}

.hoverhere.dim::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-out;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>

需要的是为opacity建立一个起点。

如果这只是用于悬停，则根本不需要JS。

.hoverhere {
  width: 100%;
  height: 40px;
  background: red;
  color: white;
  text-align: center;
}

.hoverhere::before {
  content: '\A';
  position: absolute;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-out;
}

.hoverhere:hover::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-out;
}

<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>

CSS转换新创建的psuedo元素

1 个答案: