css鼠标移入切换

Wddxg 发表于 2023-1-4 03:01

本帖最后由 Wddxg 于 2023-1-4 03:12 编辑

HTML
```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
```css
input {
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;
}
```
[效果地址](https://jsrun.net/Zi7Kp)

开创者 发表于 2023-1-4 10:22

刷Google 联盟广告呢？

nitian0963 发表于 2023-1-4 12:54

技术帖，学习了

7R903 发表于 2023-1-4 13:17

我选择用js

awdxszz 发表于 2023-1-4 14:08

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

jjxs 发表于 2023-1-4 15:13

赞，技术帖，学习了

Wddxg 发表于 2023-1-5 04:31

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

好的下次我发sci在@你

Wddxg 发表于 2023-1-5 04:30

本帖最后由 Wddxg 于 2023-1-5 12:40 编辑

页: [1]

吾爱破解 - 52pojie.cn's Archiver

css鼠标移入切换