鼠标悬停、点击效果

最新推荐文章于 2023-09-27 15:50:12 发布

原创最新推荐文章于 2023-09-27 15:50:12 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

本文通过四个实例，详细讲解了如何使用CSS的背景图片定位功能，实现鼠标悬停和点击时图标的动态变化效果。从代码示例中，读者可以学习到如何根据不同状态设置背景图片的位置，以达到美观且交互友好的网页设计。

我们在很多网页中都会看到鼠标悬停变色点击的时候又是另一个样子的图标，那是用背景图片定位显示的效果
在这里我举四个例子：
原始的样子
css中的代码：
.nav:link{
display: block;
width: 1200px;
height: 40px;
background-image: url(1/nav.png);
margin:30px auto;
overflow: hidden;
zoom: 1;
}
.nav:hover{
background-image: url(1/nav.png);
background-position: 0 -50px;
}
.nav:active{
background-image: url(1/nav.png);
background-position: 0 -140px;
}

.search:link{
width: 30px;
height: 35px;
display: block;
background-image: url(1/search.PNG);
margin:30px auto;
}
.search:hover{
background-image: url(1/search.PNG);
background-position: -60px 0;
}
.search:active{
background-image: url(1/search.PNG);
background-position: -90px 0;
}

.top:link{
display: block;
width: 22px;
height: 15px;
background-image: url(1/top.png);
margin: 30px auto;
}
.top:hover{
background-image: url(1/top.png);
background-position: 0 -19px;
}
.top:active{
background-image: url(1/top.png);
background-position: 0 -18px;
}

.buy_car{
width: 45px;
height: 37px;
display: block;
background-image: url(1/big_car.png);
margin:30px auto;
}
.buy_car:hover{
background-image: url(1/big_car.png);
background-position: -53px 0;
}
.buy_car:active{
background-image: url(1/big_car.png);
background-position: -119px 0;
}

HTML中的代码

购买

<a href="#" class="search"></a>
<a href="#" class="top"></a>
<a href="#" class="buy_car"></a>

可以复制一下看看效果哦！

鼠标悬停、点击效果

1 条评论