更改:hover

时间:2018-12-04 16:21:12

标签: css hover selection

我试图通过在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>

1 个答案:

答案 0 :(得分:0)

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