鼠标悬停，会变亮的CSS按钮

<title>变亮效果的CSS按钮</title>
<style type="text/css">
.aaa {
    height: 22px;
    width: 72px;
    background-image: url(http://www.codefans.net/jscss/demoimg/201105/chakan_btn_bg.gif);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    display: block;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.aaa a:link {
    height: 22px;
    width: 72px;
    background-image: url(http://www.codefans.net/jscss/demoimg/201105/chakan_btn_bg.gif);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    display: block;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.aaa a:hover {
    height: 22px;
    width: 72px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    background-image: url(http://www.codefans.net/jscss/demoimg/201105/chakan_btn_bg.gif);
    background-position: 0px -22px;
    display: block;
    background-repeat: no-repeat;
}
</style>

鼠标悬停，会变亮的CSS按钮

时间： 2024-08-02 04:56:41

鼠标悬停，会变亮的CSS按钮的相关文章

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q

本文,兄弟连HTML5培训 ,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

常用的css3鼠标悬停按钮动画特效

css3 按钮制作A标签属性hover css3带冒泡动画按钮 css3动画transform属性鼠标悬停图文列表动画效果 div CSS3动画带有的按钮_css3样式表属性动画按钮创意CSS3属性鼠标悬停动画菜单 css3按钮动画特效大全鼠标滑过按钮动画特效 div css3 transition属性制作鼠标悬停图标导航菜单动画展示 21种css3 transition属性鼠标悬停导航条动画效果纯div css3鼠标触碰图标背景渐变动画效果代码 css3动画鼠标滑过栏目图片滑动切换效果 c

纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: <div> <span></span> </div> css3代码: body { background-color: #333; } div { width: 200px; height: 200px; margin: 0 auto; } span { positio

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

CSS+JS鼠标悬停单元格变色

又一款鼠标悬停表格单元格,表格变色的实例效果,运用了CSS和JS两者技术的结合,因些兼容性非常好,而且易于控制,代码修改方便,跟表格读取动态数据没有任何关系,比较方便. <html><head><title>鼠标悬停单元格变色</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type=&q

CSS之鼠标悬停——内容变深/变浅

分别制作两套样式,鼠标悬停(hover)和默认状态时变深设置: .img{ filter: alpha(Opacity=60); opacity: 0.6; } .img:hover{ filter: alpha(Opacity=100); opacity: 1; } 变浅设置: .img{ filter: alpha(Opacity=100); opacity: 1; } .img:hover{ filter: alpha(Opacity=60); opacity: 0.6; } 原文地址:

10款基于jQuery实现的鼠标悬停九宫格图片延伸效果

<p><b>1.jQuery多张图片上下叠加切换插件</b></p><p>之前我们已经向大家分享过一款jQuery/CSS3洗牌效果的图片叠加切换应用,本文介绍的这款jQuery多张图片上下叠加切换插件也类似,我们可以将预先加载好的图片按不同的角度叠加起来,点击上下切换按钮时即可将图片上下切换至其他图片后面,效果非常不错.</p><p><img src="http://www.html5tricks.com