我试图通过在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>
答案 0 :(得分:0)
尝试从z-index: -1
类中删除.card
。那对我有用。