css - 在 :hover 上更改 background-position-x

Question

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

谢谢您的帮助

 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>

标签： csshoverselection

Answer 1

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