在 :hover 上更改 background-position-x

Question

我试图通过在 x 轴上移动背景图像来获得一点悬停动画。但是，我似乎找不到如何捕获 element:hover。有谁知道哪里出了问题？下面的选择器有效吗？

感谢您的帮助

 div.card:hover .cardbg {

}

.card {
border-radius:15px;
border:none;
height: 280px;
position: relative;
background: linear-gradient(to bottom right,#ffec99 0,#ffb549 100%);
z-index: -1;
font-family: 'Arial';
}

.cardbg {
 width: 100%;
 height: 100%;
 background-image: url('images/atom-original.svg');
 opacity: 0.2;
 background-size: cover;
 background-repeat: no-repeat;
 background-position-x: 100px;
 transition: .2s ease all;
 position: absolute;
  top: 0;
  left: 0;
}

div.card:hover .cardbg {
background-position-x: 10px;
  background-color: red; 
}

<div class="card">
<div class="cardbg">
</div>

</div>

Answer 1

尝试从 .card class 中删除 z-index: -1。这对我有用。

在 :hover 上更改 background-position-x

Changing background-position-x on :hover

css

selection

hover