[分享]css切换图片的样式

CSS是网页设计中最常用的语言之一，其中切换图片的样式也是常见的技巧之一。下面介绍几种常见的方法。//1.使用:hover伪类切换图片 img:hover{ content:url(new_image...

CSS是网页设计中最常用的语言之一，其中切换图片的样式也是常见的技巧之一。下面介绍几种常见的方法。

//1.使用:hover伪类切换图片
img:hover{
    content:url('new_image.jpg');
}

//2.使用checkbox实现图片切换
input[type='checkbox']{
    display:none; //隐藏checkbox
}

input[type='checkbox'] + label{
    display:inline-block;
    width:100px;
    height:100px;
    background:url('old_image.jpg');
}

input[type='checkbox']:checked + label{
    background:url('new_image.jpg');
}

//3.使用JavaScript控制图片切换
//HTML部分
<img id="myImg" src="old_image.jpg">

//JavaScript部分
var img = document.getElementById("myImg");

img.addEventListener("mouseover", function(){
    img.src = "new_image.jpg";
});

img.addEventListener("mouseout", function(){
    img.src = "old_image.jpg";
}); 

以上三种方式都可以实现图片的切换，具体使用哪种方法可以根据实际情况和个人喜好进行选择。