Question

当我将它们悬停时，我正试图在div上实现叠加。基本上我在mouseover上添加了一个类，并在mouseleave上删除了类。问题是我无法进行转换，因为类的主要效果属于：after伪元素。我实际上是使用名为.img-target

的占位符类来定位div

CSS

.img-overlay{
height: 100%
width: 100%
transition: all 1s ease;
}

.img-overlay::after{
content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    transition: all 1s ease;
}

的jQuery

$(window).ready(function() {

$(".img-target").mouseover(function() {
    $(this).addClass('img-overlay',1000);

});

$(".img-target").mouseleave(function() {
    $(this).removeClass("img-overlay");

});
});

我已经尝试将转换应用于：after和.img-target但似乎没有任何效果。有任何想法吗？：）

P.S。不幸的是，在伪元素之后使用实际上是覆盖主题结构的div的唯一方法。

Answer 1

您的问题是:after伪元素没有初始状态

＆＃13;

$(window).ready(function() {
  $(".img-target").mouseover(function() {
    $(this).addClass('img-overlay', 1000);

  });

  $(".img-target").mouseleave(function() {
    $(this).removeClass("img-overlay");

  });
});

＆＃13;

.img-target {
  position: relative;
  background-color: gold;
  height: 50px;
  width: 50px;
  transition: all 1s ease;
}
.img-target::after {
  content: "";
  display: block;
  transition: all 1s ease;
}
.img-overlay::after {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-target"></div>

＆＃13;

如果您只使用jQuery进行鼠标检测，我们可以使用CSS代替.img-target:hover::after {...}：

＆＃13;

.img-target {
  position: relative;
  background-color: gold;
  height: 50px;
  width: 50px;
  transition: all 1s ease;
}
.img-target::after {
  content: "";
  display: block;
  transition: all 1s ease;
}
.img-target:hover::after {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-target"></div>

＆＃13;

转换jQuery addClass和removeClass

1 个答案: