更改 hover 的背景图片？

Question

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.当我 hover 超过 img1 时，我希望它更改为不同的图片 (img2)。 I am using Django. Hover doesn't work even if I upload the current picture.我用的是Django。Hover即使我上传当前图片也不起作用。 I'm new to css.我是 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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>

Answer 1

you can use js for this你可以为此使用js

document.getElementById("img1").addEventListener('mouseover', () => {
  document.getElementById("img1").src = "./img2.gif"
})

更改 hover 的背景图片？

问题描述

1 个解决方案

解决方案1
0 2022-03-05 07:49:32

更改 hover 的背景图片？

问题描述

1 个解决方案

解决方案1 0 2022-03-05 07:49:32

解决方案1
0 2022-03-05 07:49:32