Question

我有问题，我需要在logo上添加image。 logo应该只显示在hover上。当前，我有一个正在通过悬停变暗的类：

.et_pb_video_overlay_hover {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

但是当我在此处添加content:url(...)时，它将立即显示在班级中。我试图做

.et_pb_video_overlay :hover{
    content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);

}

但是，它不会继承淡入和淡出，而是在图像的整个尺寸范围内缩小，我需要使其更小且在中心。有什么方法可以让我在content属性周围移动，以使其轻松进出并按比例缩小，而不会弄乱以前的属性？

Answer 1

您可以在：before

上移动它

像这样：

.content:hover:before {
  content: "";
  background-image: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
}

享受！

https://codesandbox.io/s/hover-logo-image-show-jtrh4

Answer 2

在此类popd中将content默认设置为空

.et_pb_video_overlay

然后悬停

.et_pb_video_overlay{
  content: '';
}

这将起作用，并且你们两个班级都.et_pb_video_overlay:hover{ content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png); }和.et_pb_video_overlay

内容属性不继承CSS类

2 个答案: