更改悬停时的背景图像？
图像的比例与该问题有关系吗？
<style>
.img1:hover { background-image: url({%static 'images/img2.gif' %});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
</style>
我希望当我将鼠标悬停在 img1 上时它会更改为不同的图片（img2）。我正在使用 Django。即使我上传当前图片，悬停也不起作用！我是CSS新手。
<body>
<div class="container-fluid2" style="padding-right:20%;padding-bottom:5%;" >
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
<a href="#"><img src="{%static 'images/img1.jpg' %}" class="img1 card-img-top" ></a>
<div class="card-body">
<div class="card-title"><h5><br>poketmon <br>poketmon </h5></div>
<p class="card-text">category: RPG <br>simple:sample <br>poketmon : Nintendo Switch<br>all age</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000" >
<a href="#"><img src="{%static 'images/pic2.jpg' %}" class="card-img-top" alt="..."></a>
<div class="card-body">
<div class="card-title"><h5><br>game2<br><br></h5></div>
<p class="card-text">category: RPG <br>sample: sample <br>device: Nintendo Switch<br>all ages</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
<a href="#"><img src="{%static 'images/pic3.jpg' %}" class="card-img-top" alt="..."></a>
<div class="card-body">
<div class="card-title"><h5><br>game3<br><br></h5></div>
<p class="card-text"> category: RPG <br>sample <br>device: Nintendo Switch<br>all ages</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
</div>
</div>
</body>
Would the proportions of the image have anything to do with the problem?
<style>
.img1:hover { background-image: url({%static 'images/img2.gif' %});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
</style>
I want it to change to a different picture(img2) when I hover over img1. I am using Django. Hover doesn't work even if I upload the current picture! I'm new to css.
<body>
<div class="container-fluid2" style="padding-right:20%;padding-bottom:5%;" >
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
<a href="#"><img src="{%static 'images/img1.jpg' %}" class="img1 card-img-top" ></a>
<div class="card-body">
<div class="card-title"><h5><br>poketmon <br>poketmon </h5></div>
<p class="card-text">category: RPG <br>simple:sample <br>poketmon : Nintendo Switch<br>all age</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000" >
<a href="#"><img src="{%static 'images/pic2.jpg' %}" class="card-img-top" alt="..."></a>
<div class="card-body">
<div class="card-title"><h5><br>game2<br><br></h5></div>
<p class="card-text">category: RPG <br>sample: sample <br>device: Nintendo Switch<br>all ages</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
<a href="#"><img src="{%static 'images/pic3.jpg' %}" class="card-img-top" alt="..."></a>
<div class="card-body">
<div class="card-title"><h5><br>game3<br><br></h5></div>
<p class="card-text"> category: RPG <br>sample <br>device: Nintendo Switch<br>all ages</p>
</div>
<div id="btn_group">
<button id="test_btn2">detail</button>
</div>
</div>
</div>
</div>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你可以为此使用js
you can use js for this