位置:首页 » 教程 » CSS网页制作实例:有条件的添加hover样式

CSS网页制作实例:有条件的添加hover样式

日期:2011-04-01 阅读:0num
Advertisement
破洛洛文章简介:CSS网页制作实例:有条件的添加hover样式.

给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧:

1
2
3
4
5
6
div {
opacity: 1.0;
}
div:hover {
opacity: 0.5;
}

但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?
假设我们的HTML结构如下:

1
2
3
4
5
<section>
<div></div>
<div></div>
<div></div>
</section>

我们可以给所有的div元素添加下面的透明度降低的属性:

1
2
3
.parent:hover > div {
opacity: 0.5;
}

然后我们再特别处理那个真正hover了的div:

1
2
3
.parent:hover > div:hover {
opacity: 1.0;
}

谁在用呢?
某敏感推在他们For Mac的程序中使用了相关的技术,效果还是不错的:
CSS网页制作实例:有条件的添加hover样式

实例

这个想法可以扩展到很多地方,这里是一个列表的例子,当你鼠标进入列表的时候,其余列的透明度降低,本列中也一样,只不过透明度有层层增加,视觉效果很不错。代码是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="all">
<ul>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
</ul>
<ul>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
</ul>
<ul>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
    <li><a href="#">---</a></li>
</ul>
</div>

CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
          #all > ul {
                list-style: none;
                float: left; width: 200px;
                padding: 0 10px 0 0;
            }
            #all a {
                        text-decoration: none;
                        display: block;
                        padding: 10px;
                        background: #900;
                        border-radius: 20px;
                        color: white;
                        text-align: center;
                        margin: 0 0 5px 0; 

                        -webkit-transition: all 0.2s ease;
                        -moz-transition: all 0.2s ease;
                        -o-transition: all 0.2s ease;
            }
            #all:hover a {
                        opacity: 0.2;
            }
            #all:hover ul:hover a {
                        opacity: 0.5;
            }
            #all:hover ul:hover a:hover {
                        opacity: 1;
            }

点击这里查看Demo

注意

这个小技巧,老式的浏览器是不支持的,因为他们只有对a标签的hover特性,如果也想实现相应的效果,那么就要使用js来检测鼠标进入的事件了。[English]

转载请注明:
作者:RockUX–WEB前端
出自:有条件的添加Hover样式

相关文章
  • CSS网页制作实例:有条件的添加hover样式 CSS网页制作实例:有条件的添加hover样式

    破洛洛文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢? 假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div&g

  • HTML+CSS网页制作实例:制作左上角卷角效果的网页 HTML+CSS网页制作实例:制作左上角卷角效果的网页

    破洛洛文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一

  • CSS网页制作实例代码:模拟新浪微博的三角图像

    破洛洛文章简介:CSS网页制作实例代码:新浪微博的三角图像. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • CSS网页制作实例:制作有弹性的日历表 CSS网页制作实例:制作有弹性的日历表

    网页制作poluoluo文章简介:css教程-如何用纯CSS打造一个日历. 传统的日历是在一张页面划分出几个格子.作为一个网页设计师,你有权利用表格来做出效果,我也不会说你错了. 那么做为一个标准的WEB设计师来说,遵守WEB的标准好处是不言而语的.那么我们来看下如何使用CSS来做出一个有弹性的日历表出来--为什么说是有弹性的,因为日历的大小可以随着浏览器自动调整. 最终效果演示 点击这里下载 三个有序列表(ol) 我们来回想一下日历的格式,显然一个月的日历并不是单一的有序列表,而是有三个.为什

  • HTML+CSS网页制作实例:制作联系人网页表单 HTML+CSS网页制作实例:制作联系人网页表单

    破洛洛文章简介:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格. 在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格.希望本教程对你有所帮助. 我们创建的表单使用了线条纹理作为背景,投影的巧妙使用使得纸张立体感强,让人印象深刻.标题和表单区

  • CSS网页制作实例:三列等高DIV的网页布局

    破洛洛文章简介:用纯CSS实现三列DIV等高布局的方法. 散列等高 <body> <div id="wrap"> <div id="left"> <p style="height:500px">style="height:500px"</p> </div> <div id="center"> <p style=&quo

  • CSS网页制作实例教程:非常酷的日期效果 CSS网页制作实例教程:非常酷的日期效果

    破洛洛文章简介:LearningjQuery.com的博客日志上的日期效果非常的酷. LearningjQuery.com的博客日志上的日期效果非常的酷,如下图: 其中文字的样式和垂直的年份就会告诉你这不是用图片来完成的.而且在标记语言中日期信息是是以文字出现的,就像通常的那样. 通过Firebug查看,代码非常简洁漂亮! 很明显每一个日期并没有各自的图片.它们都出自同一张图片(css sprites!),图片的不同地方被放置上了不同的内容:天.月和年.也许你会记得这和一年前Joost de V

  • CSS网页制作实例下载:纯CSS3动画效果 CSS网页制作实例下载:纯CSS3动画效果

    破洛洛文章简介:使用 transform和 transition制作的纯CSS3动画效果,很漂亮- 简介:使用 transform和 transition制作的纯CSS3动画效果,很漂亮- 下载地址: 点击下载~~~~~~~~~~

  • 网页制作实例:将PSD网站模板转换为XHTML+CSS网页 网页制作实例:将PSD网站模板转换为XHTML+CSS网页

    网页制作poluoluo文章简介:将小型.现代的产品主页由psd转换成XHTML/CSS模板. demo 点击下面的图片将会看到本次制作的 demo 的效果. 开始之前 如果你还没有准备好,我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型.现代的产品主页 , 因为第二部分需要第一部分做好了的psd文件. 如果你想跳过第一部分,你可以直接在第一部分中下载源文件,下面将会需要它才能继续. 创建文件结构,准备文件 1 在桌面上创建新的空目录,取名portfolio. 2 在p

  • CSS网页制作:各式各样的按钮制作方式

    破洛洛文章简介:CSS网页制作:各式各样的按钮制作方式. 按钮整理网页中通过链接来实现页面的跳转,链接的重要表现形式就是按钮 将各式各样的按钮制作方式整理一下. 1,网页中默认的按钮(如表单中的按钮,下拉框,单选按钮,多选按钮,上传按钮等) 2,css基本样式制作的按钮(如添加边框,背景色等) 3,图片制作的按钮 a,按钮形状+文字一起的图片按钮 b,只有按钮形状,通过html加文字 c,各种图标按钮(不是按钮的形状,但有按钮功能) d,两张图片拼接的按钮(一般处理圆角) 4,纯css3样式按钮

  • CSS3网页制作实例:CSS3网页页面效果

    破洛洛文章简介:CSS3网页制作实例:页面效果. CSS3网页制作实例:页面效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

  • CSS网页布局实例:三栏等高布局 CSS网页布局实例:三栏等高布局

    网页制作poluoluo文章简介:CSS网页布局实例:三栏等高布局. 首先,三栏等高布局,顾名思义,可以概括为以下特征: 1.3列(白痴也知道) 2.这3列高等相等 3.这3列的高度不是固定不变,而是随着内容的变化而变化 Step 1: xhtml代码: <div id="header">#header</div> <div id="container"> <div id="main" class=&qu

  • CSS网页制作:浮动清除的新方法 CSS网页制作:浮动清除的新方法

    网页制作poluoluo文章简介:CSS网页制作:浮动清除的新方法. 起源: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .cl

  • CSS网页制作教程:制作网页导航条 CSS网页制作教程:制作网页导航条

    网页制作poluoluo文章简介:CSS网页制作教程:制作网页导航条. 相关链接 PS导航设计.网页设计教程 CSS标签重置 对于XHTML+CSS布局起着一个重要的决定性作用,它是提高页面浏览器兼容性的第一步. 那么什么是标签重置呢? 顾名思义,就是对HTML中的所有标签属性重置,因为每个浏览器都有一个自己默认的CSS文件,对HTML中的所有的标签进行定义,以便没有定义CSS的页面能够正常显示在页面,页面在加载的时候如果没有找到自带的CSS文件,浏览器就用事先为您准备好的CSS样式,但是这个对

  • CSS网页设计实例:15个用CSS设计的网页表单实例 CSS网页设计实例:15个用CSS设计的网页表单实例

    网页制作Poluoluo文章简介:CSS网页设计实例:15个用CSS设计的网页表单实例. 我们都知道,表单是网页的重要组成部分,它是网站与用户进行交互的窗口.然而表单中固定的诸如说明文字.输入框.提交按钮等元素,使得表单设计略显乏味,难有创新,这一点不少Web设计师深有体会.好的Web设计师就是可以在平凡处挖亮点,让表单设计或耳目一新,或整洁素雅.下面就来看这样的15个基于CSS的优秀表单设计. 以下译自:Coolest 15 css based html forms rarely seen 中

  • css3网页制作实例:仿Apple.com的导航栏

    破洛洛文章简介:css3网页制作实例:仿Apple.com的导航栏 apple的官网有个相当不错的头部导航,今天我们运用css3的知识,不借助一张图片,来实现类似的效果. 下载源文件:http://www.pouoluo.com/files/soft/1_121211104404.zip 1.会用到的css3知识 text-shadow :文字阴影 border-radius:圆角 box-shadow:容器阴影 box-shadow: inset :当增加inset后,表示使用内阴影 grad

  • 了解CSS网页制作

    标签: css, 网页, 制作 在下想掌握CSS网页制作,恳请电脑高手传授一些初级css网页制作教程知识.谢谢啦. 最佳答案 CSS只是一个层叠样式表,简称样式表.它只是HTML.XHTML和DHTML的其中一部分,你不可能只用它来做一个网页~要使用CSS,前提是必须学会HTML元素,再从中调用CSS样式表.

  • CSS网页制作技巧:隐藏网页元素的方法汇总

    网页制作Webjx文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { po

  • DIV+CSS网页设计实例:网页背景文字图片居中

    破洛洛文章简介:DIV+CSS网页设计实例:网页背景文字图片居中. 在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的. 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面的内容是由<html></html>和<body></body>这两个包含,那根据较近父级我们就设置body的CSS来实现居中问题,可以向在内容里居中有text-

  • DIV+CSS网页设计实例:DIV实现网页Textarea效果

    破洛洛文章简介:DIV+CSS网页设计实例. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv=&quo

最新文章
  • 想做个调查了解:V2EXer 翻译英文的文章,有使用过翻译辅助工具吗?词典或词霸类的不算

    翻译英文的文章,或者翻译一本书时,你们有使用过哪些翻译辅助工具? 比如:用来管理翻译的文件,存储翻译过的内容,获取机器等等辅助 市场上有啥 SDL Trados, Heartsome 等工具,还有像 Transifex 这样的在线翻译平台. --cut--

  • 囤积了几个网贷的域名, 寻求转让

    baoquandai.com 保全贷 保险安全的网贷,好记好听 wangdai-china.com 网贷中国 大气, 好记 wangdai-home.com 网贷之家 好记, 流行 wangdai-world.com 网贷世界 好记, 大气 wangdai-bank.com 网贷银行 大气, 正规 wangdaibank.com 网贷银行 大气, 正规 wangdaiyinhang.com 网贷银行 大气, 正规 wangdai-center.com 网贷中心 好记 wangdai-mart.c

  • [北京中关村] 招聘 WEB 前端 北京顺顺教育有限公司

    [公司简介] 顺顺教育利用大数据与SaaS,结合线下销售渠道和体验中心,建立连接学生.咨询顾问与海外院校的平台,为学生提供科学理性的国际教育解决方案. 改变目前留学行业信息不对称.不透明.收费不合理的现状. [关于我们] 技术产品团队累计获得编程马拉松奖金30余万,制作百万用户社交软件,热爱前沿技术,追求用户体验:教育运营团队有超过20年的留学和教育行业经验,拥有雄厚的海外院校资源与产业人脉,深知用户痛点.顺顺教育期待你的加入! Web 端 岗位职责: 负责浏览器端软件(SaaS)开发,类似te

  • 给女朋友的生日祝福短信

    (1) 这世界何其美丽,因为有你有我! 生日快乐... (2) 在我心灵的扉页中,永远深印着你的倩影.生日快乐! (3) "你最可爱",我说时来不及思索.而思索后还是这样说. 祝生日快乐! (4) 告诉我,什么时候你再来,耕垦我荒芜的笑容,系住我失舵的小舟,愿你今日快乐! (5) 物换星移,不会为我们停留,唯有你我的爱情,永藏在心的深处,祝你生日快乐! (6) 有树的地方,就有我的思念;有你的地方,就有我深深的祝福,祝你生日快乐! (7) 告诉我,什么时候你再来,耕垦我荒芜的笑容,系住

  • 全面解析直通车操作技巧 全面解析直通车操作技巧

    想要提升无线直通车的数据,那么就得提升单品无线端的权重.对于提升单品无线端的权重,目前主要就是那几个关键词:无线手机店铺,无线单品详情页,无线访客占比,无线点击转化率,手机专享价 直通车并不难,难就难在你如何去学习操作.实战方法大于理论,所以更多的亲们学习到了,一定要去实战起来,运用起来,这样才是能真正的帮助自己提升!![这世上最快的捷径,就是脚踏实地!!] 那么来了,干货来袭,坐稳了. 首先直通车PC端, 一:直通车原理 直通车是一种付费的营销工具,具有精准性高,灵活性强的,可以在店铺不同规模

  • 打开win7重装后的文件夹

    原先是电脑装的是win7家庭普通版系统,把其中一个文件夹最新电脑系统下载给隐藏了,结果重装了win7旗舰版以后那个文件夹打不开了,没有访问权限,一共有两个方法可以解决这个问题,看下面内容! 解决方案:请打开记事本 复制下面内容 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT/*/shell/runas] @="管理员取得所有权" "NoWorkingDirectory"="" [HK

  • 低调,做人的智慧 低调,做人的智慧

    低调做人,你会一次比一次稳健;高调做事,你会一次比一次优秀. 生得漂亮帅气,别人夸,自己从来不夸,这叫气质;满腹经纶,学富五车,别人崇尚,自己从来不去炫耀,这叫涵养;不仅有财而且有才,别人羡慕自己从来不觉得,这叫低调;身居高职,地位显赫,别人敬畏,自己却不认为自己高贵,这叫谦卑. 低调就是不张扬,不炫耀,无论自己事业有多么辉煌,无论成就有那么伟大,无论学问有多么渊博,总认为自己不过很平凡.低调并不是没有高调的资本,而是有了这个资本,却更懂得拥有一颗平常的心,知道任何时候都要去隐忍. 低调的人,一

  • dmg是什么文件? dmg是什么文件?

    DMG文件是苹果系统的安装文件,一般只有在苹果系统(MAC)下才能打开.那么我们如何在windows系统下打开dmg文件呢? dmg是什么文件 DMG文件是一种压缩文件格式,是MAC苹果系统系统上的一个镜像文件,相当于在Windows上常见的iso文件. dmg文件如何打开? DMG文件是苹果系统的安装文件,一般只有在苹果系统(MAC)下才能打开.DMG在苹果机上可以直接运行加载,也可以在Windows系统上可以通过命令行软件dmg2iso.exe转换成ISO文件,或是用UltraISO把dmg

  • 写给30岁的自个儿

    写给30岁的自己 我生于83年,新年伊始便用"而立之年"作为QQ签名,希望能给自己那依旧年幼的心灵以鞭策. 30岁的男人应该是自信.成熟.稳重的,不管你是否已经有自己的事业,都应该是一个对家庭.对工作负有强烈责任心的人. 半年的时间以来,我仍然总是会忘记自己的年龄,忘掉自己肩上的责任,有时候也会想到自己收入仍然不够多,生活不够稳定,生你养你的老妈还没有过过一天的好日子,而你的老婆也将为你生一个可爱的孩子.但是你总是会忘掉这些,忘掉你已经趋于而立之年.当然也总会有很多借口为白白浪费的时间

  • 《史上最具挑战的冒险》第19关图文攻略 《史上最具挑战的冒险》第19关图文攻略

    史上最具挑战的冒险第19关怎么过?不少玩家被卡在了这一关,为帮助大家成功过关,本次小编为大家带来了史上最具挑战的冒险第19关图文攻略,快来看看吧. >>><史上最具挑战的冒险>通关图文攻略 第十九关攻略: 前面的几个方块看似是很好跳跃的,但是由于都是虚体,所以玩家们在跳跃了之后,要赶紧的离开,一直要到中间没有地刺的地方,才能够缓一口气. 如上图所示,地刺中间的方块是没有陷阱的,另外,我们在这里要把头顶的方块给顶出来,要不然后面跳跃的时候会有障碍. 当我们越过了中间的落脚点之后

热门推荐
  • 推荐好友订阅邮件—SmartBargains案例一则 推荐好友订阅邮件—SmartBargains案例一则 Retailemailblog网站在昨天分享了一个案例,非常有趣.SmartBargains网站利用邮件转发朋友功能,来增加自己的订阅用户数. 6月23日,用户收到一份特殊的任务,只要全体收件人帮助网站得到3000个新订阅用户,所有用户就能享受一个折扣,并隔天公布. 看上去真是个有趣的Idea.第二天,奇迹发生,一天时间就完成了目标,所有用户可以享受7.8折,适用于网站所有品类商品. 在以往的很多案例中,网站发邮件多半会要求订阅用户成为Facebook 好友之类.面对折扣这把"利剑",
  • 孕妇孕期产检的注意事项 孕妇孕期产检的注意事项 [导读]孕妇是指怀孕的妇女.做孕妇是幸福的,做孕妇也是众多已婚妇女渴望的,肚子高高隆起的孕妇代表了母性的美.孕妇是女人一生中的一个特殊时期,此时家人要给孕妇更多的关心和呵护,孕妇也要积极适应怀孕后的生活.孕期的检查也是必不可少的.那么,孕妇孕期需要做哪些检查呢? 1.B超,直观监控宝宝的发育 正常情况下,接受此项检查的最佳时机是在孕期18到20周,大多数的胎儿可能发生的问题都可以在此期间被认出.它可以看到胎儿的躯体,头部,胎心跳动,胎盘,羊毛和脐带等,可以发现胎儿是否存活,是否多胎,甚至还能鉴定
  • 鼠绘逼真鼠标 鼠绘逼真鼠标 最终效果图 1.建一个400X400.300DPI的文件(CTRL+N). 2.新建一个层,用钢笔工具将鼠标的轮廓钩出.(图1) 3.将路径转为选区,将前景色设置为30%的黑,按ALT+DELETE填充. 4.到滤镜--杂色--添加杂色,数量为0.2,高斯分布,单色. 5.到菜单--滤镜--渲染--光照效果,做如(图2)设置. 6.新建一个层,图层2,用钢笔工具钩出鼠标个分割部分的的线条,转成选区并以黑色填充.(图3) 7.用橡皮擦工具,调整压力至20%,将刚才的黑色线条的受光部分擦得淡一点,(
  • ThinkPad学生机香港开卖 优惠涉及多款机型 ThinkPad学生机香港开卖 优惠涉及多款机型 科技讯ThinkPad香港学生机计划近日公布,包括香港科技大学.城市大学.理工大学.浸会大学等学校均可优惠购机,涉及机型则包括X240.X240s..T440s.X1 Carbon.L330等. ThinkPad学生机详细情况如下: X240 ·i5 1.6GHz处理器.4GB内存.500GB硬盘,售价6199港币,约合人民币4892元,大陆未上市: ·i5 1.6GHz处理器.4GB内存.500GB硬盘.触控屏,售价6999港币,约合人民币5523元,大陆未上市: ·i7 1.8GHz处理器.
  • 励志友情留言代码_富贵不如知心朋友 励志友情留言代码_富贵不如知心朋友 励志友情留言代码如下: [ftf=Webdings][fts=6][ftc=00A99E][ftc=FFF100]f[/ft][/ft][/ft][/ft] [M] [ftc=00AEEF]人[/ft] [ftc=07B5E7]世[/ft] [ftc=0EBCE0]间[/ft] [ftc=15C3D9]一[/ft] [ftc=1DCBD1]切[/ft] [ftc=24D2CA]荣[/ft] [ftc=2BD9C3]华[/ft] [ftc=33E0BC]富[/ft] [ftc=3AE8B4]贵[/