CSS3实现鼠标移入移出时改变样式的效果

1，使用伪类实现样式切换

伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。

 代码如下 复制代码

<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
 
<button class="slickButton">hangge.com</button>

2，使用CSS3的过渡功能实现颜色过渡
直接使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。

（1）背景色过渡变化

下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。

 代码如下 复制代码

<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    transition: background 0.5s;
    -webkit-transition: background 0.5s;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
</style>
 
<button class="slickButton">hangge.com</button>

（2）背景色，文字都需要过渡效果
上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。

 代码如下 复制代码

<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    transition: background 0.5s, color 0.5s;
    -webkit-transition: background 0.5s, color 0.5s;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
</style>
 
<button class="slickButton">hangge.com</button>

（3）过渡所有样式

如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。

 代码如下 复制代码

transition: all 0.5s;
-webkit-transition: all 0.5s;

3，更多的过渡效果
（1）淡入淡出
通过修改 opacity 属性改变透明度，从而实现图像的淡入淡出。

 代码如下 复制代码

<style>
.slickButton2 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
 
.slickButton2:hover {
    opacity: 1;
}
 
<button class="slickButton2">hangge.com</button>

（2）阴影（投影）效果
使用 box-shadow 属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。

 代码如下 复制代码

<style>
.slickButton3 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;  
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
 
.slickButton3:hover {
    box-shadow:5px 5px 10px gray;
}
</style>
<button class="slickButton3">hangge.com</button>

（3）发光效果

同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。

 代码如下 复制代码

<style>
.slickButton4 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;  
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
 
.slickButton4:hover {
    box-shadow:0px 0px 20px orange;
}
</style>
<button class="slickButton4">hangge.com</button>

4，下面样式不值得使用过渡效果

对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素，那么最好使用变形技术。

时间： 2024-10-28 09:21:38

CSS3实现鼠标移入移出时改变样式的效果的相关文章

鼠标移入移出时颜色变化代码

[实例名称] 鼠标移入移出时颜色变化 [实例描述] 当用户将鼠标移动到按钮或链接上时.为了突出显示用户的选择,会改变链接和按钮的颜色.默认链接的颜色是自动变化的,本例学习如何手动为按钮设置这种效果. [实例代码]        <html xmlns="http://www.w3.org/1999/xhtml" >        <head>        <title>标题页</title>        </head>  

鼠标移入移出事件改变图片的分辨率的两种方法

 做一个鼠标移入移出图片事件,首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同,具体实现如下,感兴趣的朋友可以参考下 最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下  首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同  方法一   代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type

鼠标移入移出事件改变图片的分辨率的两种方法_javascript技巧

最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下 首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同 方法一 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

javascript表格隔行变色加鼠标移入移出及点击效果的方法

 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现点击变色,鼠标移入移出时,颜色不被覆盖. 上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

javascript表格隔行变色加鼠标移入移出及点击效果的方法_javascript技巧

本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.  说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现点

鼠标移入移出改变CSS样式的小例子

网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

JavaScript实现类似拉勾网的鼠标移入移出效果_javascript技巧

先上效果图(gif自己录制的,有点难看抱歉,工具licecap)   实现思路  HTML结构 <ul> <li> <div class="bg"> <p>JS</p> </div> </li> ..... </ul>     li作为鼠标移入(mouseenter)和鼠标移出(mouseleave)的载体.     div作为动画执行的载体. CSS     div采用absolute定位

我写的这段代码是不是有问题，都没效果。就是鼠标移入移出让它高亮。

问题描述 我写的这段代码是不是有问题,都没效果.就是鼠标移入移出让它高亮. 代码如图所示,我想实现鼠标移到li的时候把它的样式改为active,其实就是高亮.然后移除li的时候把li去除.悬赏的币不多,请见谅!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 解决方案 解决方案二: 上面Js中多了个分号,我把分号去掉,结果也一样,样式用的是boostrap 解决方案三: http://m.blog.csdn.net/article/details?id=50

鼠标经过tr时,改变tr当前背景颜色

 本篇文章主要介绍了鼠标经过tr时,改变tr当前背景颜色的示例代码,需要的朋友可以过来参考下,希望对大家有所帮助 示例如下: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>鼠标经过给tr换颜色</title>     </head> <body>