css鼠标移入切换

Wddxg

HTML

<input type="radio" id="radio1" class="radio-1">
<input type="radio" id="radio2" class="radio-2">
<input type="radio" id="radio3" class="radio-3">
<div>
    <img src="https://img.zcool.cn/community/0101195543065f0000019ae94cc470.jpg@3000w_1l_0o_100sh.jpg">
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.9vwljyOWH69qp7xKCTTr0AHaHa?w=185&h=186&c=7&r=0&o=5&dpr=1.3&pid=1.7">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.LraeHDsfeGLjTTFCiQEceQHaE7?w=304&h=203&c=7&r=0&o=5&dpr=1.3&pid=1.7">
</div>
<label for="radio1">图片1</label>
<label for="radio2">图片2</label>
<label for="radio3">图片3</label>

CSS

input[type=radio] {
    display: none;
}

div {
    width: 200px;
    height: 180px;
}

div img {
    width: 200px;
    height: 180px;
}

#radio2 ~ div img:nth-child(2),
#radio3 ~ div img:nth-child(3),
.radio-2:hover ~ div img:nth-child(1),
.radio-3:hover ~ div img:nth-child(1) {
    display: none;
}

#radio1:hover ~ div img:nth-child(1),
#radio2:hover ~ div img:nth-child(2),
#radio3:hover ~ div img:nth-child(3) {
    display: block;
}

效果地址

开创者

刷Google 联盟广告呢？

nitian0963

技术帖，学习了

7R903

我选择用js

awdxszz

还是用js方便，css要写一大堆，js找准class或者id直接就搞定了

jjxs

赞，技术帖，学习了

Wddxg

开创者 发表于 2023-1-4 10:22
刷Google 联盟广告呢？

好的下次我发sci在@你

Wddxg