位置:首页 » 教程 » 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

最新文章
  • 创业路上10大坑,看哭多少创业人!

    这两年,一旦有人说自己"创业了",好像就自带光环,靓丽不少. 可是,这些年的创业坑,不知牺牲了多少有志青年.这背后可都是血泪. 今天,看看创业界的一线导师说的创业坑: 1. 任何不赚钱的创业都是"耍流氓". 有很多创业者为了追求高大上的概念,作为融资的噱头,不惜把自己一些很赚钱的项目砍掉,虽然融到了大笔的钱,却失去了自身的造血能力,终究难逃因烧钱而死. 创业根本的目的是让项目盈利,而不是制造数据让创业者虚胖.所以为什么有些人总讲数据,就是因为他没有利润,那就只能用数

  • compile successfully in console but errors occur after importing into eclipse

    i have downloaded the source code for project deeplearning4j and compiled successfully by the console in fedora. but when i import the project in eclipse, it prompts many errors and all errors are like this "method XXX is undefined for the type YYY&q

  • V2EX DNS 可否优化 iTunes下载

    通过 @Paveo 大的一篇日志产生的想法~ http://duurl.cn/a6liw 将a1-a1999 的 host 指向 *.phobos.apple.com 208.46.163.74 我觉得这可以是一个可选项的feature. [*] 优化 iTunes 下载 开发成本很大 就算了 --cut--

  • Android 开发技术周报 Issue#67

    本期主要内容 新闻 OpenJDK 将对 Android 开发产生怎样的影响? 教程 ReactNative For Android 项目实战总结 浅析 Android 的窗口 Android 中有限状态机的设计和应用 Android 相机开发那些坑 生还是死? Android 进程优先级详解 优化 Android 线程和后台任务开发 Android 6.0: 动态权限管理的解决方案 如何自定义 Android 注解? Andriod 破解之道 动态 Android 编程 Bitmap.recy

  • python 开发 erp,是使用现有的开源 openerp 二次开发, 还是自己重新开发呢

    研究了openerp一段时间,了解的不是很深入,本来想用来二次开发给我们公司用,但发现要学的东西太多,而且似乎有些功能要自定义起来比较麻烦,我开始问我自己,是不是应该自己从0开发呢,从0的好处是,每个功能,每个模块,自己可以比较容易把控, 坏处是需要花费较多精力,请大家给出意见 --cut--

  • 完璧归赵的成语故事

    战国时候,赵王得到了一块名贵宝玉"和氏璧".这件事情让秦国大王知道了,他就写了封信,派人去见赵王,说秦王愿意用十五座城来换那块宝玉. 赵王看了信,心里想,秦王一向是只想占便宜,不肯吃亏的人.这一次怎么这么大方呐?要不答应吧,怕秦国兴兵来进攻,要答应吧,又怕上当.他想来想去拿不定主意,就跟大臣们商量.大臣们也想不出什么好办法来. 蔺相如知道了,对赵王,说:"大王,让我带着'和氏璧'去见秦王吧,到那里我见机行事.如果秦王不肯用十五座城来交换,我一定把'和氏璧'完整地带回来.&qu

  • 太阳系最神秘的八大未解之谜 令人震惊 太阳系最神秘的八大未解之谜 令人震惊

    科学家认为,太阳系是宇宙中十分神秘且特殊的一个星系,不仅因为其拥有8大各具特色的行星,更是因为是仅有的存在生命的星球,地球. 当然,除了地球之外,太阳系中仍然有着很多鲜为人知的未解之谜.下面就跟着小编一起来看看太阳系最神秘八大未解之谜. 谜之一:水星如何诞生 水星如何诞生 太阳系由九大行星其中水星.金星.地球.火星及冥王星,是以岩石为主要成份的"地球型行星";木星.土星.天王星及海王星,是大量气体包围的"木星型行星". 最靠近太阳的行星是水星,它是如何诞生的呢?有两

  • 18个世界知名企业的经典段子,你知道几个?

    下面这18个世界知名企业的经典段子,虽已流传江湖已久,但放在今日,依然食之可味,还能让你在大笑的同时思考职场:麦肯锡与牧羊犬.诺基亚与核桃.安利美女的初恋.华为宅男与快递员....... 1.IBM 两个食人族到IBM上班,老板说"绝对不许你们在公司吃人,否则我立刻开除你们!" 三个月下来大家相安无事,突然有一天老板把两个食人族叫到办公室大骂一顿:"不让你们吃人不让你们吃人,还吃,明天你们不用再来上班了!" 两个食人族收拾东西离开IBM,临出门时一个忍不住骂另一个:

  • 化妆时起皮卡粉该怎么办 化妆时起皮卡粉该怎么办

    很多女性在化妆的时候,都会有起皮卡粉的情况发生.美容护肤专家认为,出现起皮卡粉的状况,与你的化妆技术有直接关系.那么,出现起皮卡粉的状况,该怎么办呢?下文介绍了一些好用的化妆技巧. 化妆时起皮卡粉该怎么办? 1.首先在下颌骨的位置试出适合自己皮肤颜色的粉底液.[下颌骨试色] 2.要想打造出轻薄的底妆一定要使用粉底刷去刷粉底液,这样不仅轻薄均匀而且会增强粉底液的遮盖力.[粉底刷全覆盖] 3.刷粉底的顺序是先从两颊由上到下由里及外的涂抹,之后由T区部位自然过渡到唇周围的O区,最后是额头部位.将整脸涂

  • 《天下3》战场玩法 《天下3》战场玩法

    战场简介 战场是类似于副本的独立区域,它是专门为喜欢战斗比武的玩家而制作的,有如下特点: 公平:每个战场都有规定的人数上限.无论是阵营对决,还是个人乱斗,都不会受到外界干扰,确保战场战斗的公平. 乐趣:每个战场都有不同的战斗规则,有的是为了阵营而战,有的则是为了个人而战,有的以杀敌为胜利条件,有的则以积分为输赢判定.与人斗,其乐无穷. 场景:每个战场都有着全新的场景,让你得以在美景中酣畅战斗,心系荣耀,身在画图. 奖励:排名.称号.装备.每样都是英雄的梦中追求.参与战场,你即可拥有! 如何进入战

热门推荐
  • 末世恐龙化石证实恐龙灭绝或为小行星碰撞所致 末世恐龙化石证实恐龙灭绝或为小行星碰撞所致 据媒体报道,恐龙的灭绝原因一直是考古学家探索的难题,一块恐龙角化石揭晓了令科学家迷惑不解的恐龙灭绝之谜,这个最后幸存恐龙的角化石证实了恐龙是在一颗巨大陨星碰撞地球后导致恐龙物种灭绝的. 据悉,这个45厘米长的恐龙角属于食草类恐龙,挖掘地点位于美国蒙大纳州东南部阴冷荒地地狱溪地质层,挖掘地点与众不同,仅位于白垩纪-第三纪(K-T界线)岩石层下方13厘米,该地质层的动物化石通常都是恐龙残骸.这表明最后幸存的恐龙一直存活至这一历史时期,之后其踪迹从此消失. 科学家认为恐龙的突然消失是在一场突如其来的地
  • 疼女人的13种方式 疼女人的13种方式 现在的感情都很不稳定,不是这方面出问题就是那方面出问题,但是还是男人出问题居多,很多男人以为在外面偷吃,家里的根本不会知道.其实这样的想法是错的,纸是包不住火,迟早会出事.要让女人死心塌地,以下这十三点要牢记. 1.女人不管再贤惠有母性,但骨子里都是一个孩子.不要总希望她多么为你着想,多么会体贴你的感受,多么以你为中心.她也希望可以象孩子一样任性,希望有个人像宠孩子一样宠她爱她,照顾她关心她,而不只是像孩子一样向她索取关爱和宽容. 2.做错了事情.伤害了她要承认,并且以行动向她陪不是.偶尔放下所
  • Flash CS3动画制作:精密角色动画设计技巧-Flash动画制作技巧 Flash CS3动画制作:精密角色动画设计技巧-Flash动画制作技巧 poluoluo核心提示:角色设计是这个效果成功的决定因素.保持简单的风格,因为更多的解剖适用于你的角色,这种努力将使你的动画完成这种风格. 5.2 2.5D高级 让我们应用同样的技巧,讲解一个先前的例子,制作一个更加精密的角色.这个角色由几个单独的对象组成,所有这些都被心中的这个动画技巧设计和编排.每 一个对象间的空间关系是重要的,它们都将运动,倾斜和相互缩放,但却是各种不同的数量.这个效果是建立在它的各个部分的总和之上的.创建这个技巧没有什么过于精密的东西,但是它的结果看起来却十分的复杂.
  • 李彦宏:百度将投资30亿美元布局O2O领域 李彦宏:百度将投资30亿美元布局O2O领域 近日DCM在美国旧金山举办了2015年的DCM CEO峰会,超过100名来自中国.美国.日本的DCM被投公司创始人.CEO参加了本次会议. 在峰会现场,百度CEO李彦宏与DCM联合创始人.董事合伙人赵克仁展开对话,李彦宏在对话中表示,几年前百度不愿意进行太多投资,但现在投资会成为百度越来越重要的战略部分. 李彦宏说,现在中国的经济对互联网非常友好,在所有纵向领域都可以找到机遇."有人说百度不投资,要么收购要么控股,这是个误解,我们投资了很多公司,只拿少部分股份." 在谈到投资布局O2O