位置:首页 » 教程 » 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技术来创建信纸的外观,[email protected]格. 在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,[email protected]格.希望本教程对你有所帮助. 我们创建的表单使用了线条纹理作为背景,投影的巧妙使用使得纸张立体感强,让人印象深刻.标题和表单区

  • 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

最新文章
  • 云服务商靠什么颠覆传统CDN格局 云服务商靠什么颠覆传统CDN格局

    文/郑凯 云服务商进军CDN的调门从未这样响亮. 3月下旬,阿里云和腾讯云相继高调发布CDN6.0产品和云 CDN计划,而4月25日举行的2016亚太CDN峰会,更成为云服务商的狂欢日,金山云.乐视云.又拍云集体炮轰,抛出颠覆CDN市场格局的各种论断.传统CDN厂商网宿显得形单影只,蓝汛并未参会. 据统计,2015年,传统CDN厂商占据80%以上的市场份额,云服务商占20%左右.而今年则是CDN行业一个重要拐点,因为CDN行业的竞争将不仅仅局限在CDN领域,各种应用场景催生各类需求,云服务商对客

  • footbig

    我很珍贵的照片在上面,然后硬盘坏了,我好杯具 --cut-- bloggerao在2011-09-06 16:49:3回答到: 所以说 备份是个好习惯嘛 多处备份 多处 Orz在2011-09-06 16:52:2回答到: 一直不清楚 @livid 对 footbig 的态度,这样的帖子不是第一次出现了.

  • [北京][前端工程师]第四范式公司招聘前端工程师

    Frontend Engineer(前端开发工程师)(15-20K * 16 + 期权) 每周 5 天,团队平均技术水平很高, A 轮融资完成,行业比较稳定有前途 简历请发给: [email protected] 工作地点: 上地地铁站北 580 米 工作职责: 负责大数据管理与分析系统.大规模机器学习平台等产品的前端开发和维护 与后端工程师协作,高效完成产品的数据交互.动态信息展现 任职要求: 1 年以上 Web 前端开发经验 精通 HTML/HTML5/CSS3/Javascrip

  • 9种方法可以缓解月经疼痛

    1.服用维生素许多病人在每天摄取适量的维生素及矿物质之后,很少发生经痛.所以建议服用综合维生素及矿物质,最好是含钙并且剂量低的,一天可服用数次. 2.补充矿物质钙.钾及镁矿物质,也是能帮助缓解经痛.专家发现,服用钙质的女性,比未服用的少经痛.镁也很重要,因为它能帮助身体有效地吸收钙.不妨在月经前及期间,增加钙及镁的摄取量. 3.少食含咖啡因的食物咖啡.茶.巧克力中所含的咖啡因,会使你神经紧张,可能促成月经期间的不适,咖啡所含的油脂也人刺激小肠.

  • 万万歌词《万万没想到》电影主题曲 万万歌词《万万没想到》电影主题曲

    万万天团.赵英俊 - 万万 (电影<万万没想到>暖心主题曲) 词曲:赵英俊 编曲:赵英俊 每次望着天空的流星 就觉得自己配不上你 累积多少失眠的叹息 才能换回来一次幸运 提出问题花费的力气 永远都不够解决问题 原来世上最远的距离 就是结局和我的期许 从来不知道 啦啦啦啦啦 永远到不了 啦啦啦啦啦 怎么会遇到 啦啦啦啦啦 万万没想到 啦啦啦啦啦 啦啦啦啦啦 啦啦啦啦啦 啦啦啦啦啦 啦啦啦啦啦 啦啦啦啦啦 啦啦啦啦啦 万万没想到 啦啦啦啦啦 怕失去你就要更珍惜 到底是因为还是所以 听了看了那么多道

  • iphone手机翻页小技巧 iphone手机翻页小技巧

    如果有人问到 iOS 的主界面要如何翻页,我们肯定会说:"这还不简单,左右划动呗."这当然是一种方法,不过如果有锋友觉得划动操作还是太麻烦了,也并不是没有别的操作方式. 事实上,我们在 iOS 里是能够实现轻轻一点就翻页的,只不过操作区有点隐蔽,所以知道的人比较少.正如上图中展示的那样,我们只需在红色箭头所指处按一下就可以实现翻页. 如果还是有些不清楚,我们可以再看近一些 -- 大概在底部图标栏和壁纸的交界处. 虽然这种操作并不常用,但根据个人习惯.当时所处的环境不同,或许它还是有一些

  • 美科学家称土星和木星会下“钻石雨”  年产1000吨 美科学家称土星和木星会下“钻石雨” 年产1000吨

    据报道,美国的天文学家表示,土星和木星会下"钻石雨","钻石"尺寸也相当不错. 土星和木星都属于气体行星,新的大气数据显示,这两个星球上充满了"亮晶晶"的结晶碳. 科学家解释说,土星和木星大气中,都含有甲烷.强闪电可把甲烷变成煤灰型态的碳,煤灰在沉降的过程中固化成石墨,然后在高温高压的作用下,变成钻石. 科学家估计,土星上每年通过这样的过程,产生大约一千吨"钻石",部分"钻石"直径或可以达一厘米.然而,土星

  • NASA的哈勃拍摄到两个古老年轻的恒星 NASA的哈勃拍摄到两个古老年轻的恒星

    据国外媒体报道,NASA的哈勃太空望远镜拍摄了一个不寻常的星系结构,距地100000光年.这类似于一个螺旋形围绕两个碰撞的星系. "我们惊讶地发现这个惊人的形态.我们已经知道的"珠链"现象是在螺旋星系的武器和潮汐桥之间的相互作用星系.然而,这种特殊的超星系团的安排是从来没有过的巨型合并椭圆星系,"科学家表示. 年轻的.蓝色的超巨星簇是均匀分布的沿链.对已深深嵌入致密星系群被称为SDSS j1531 + 3414.集群强大的引力扭曲的背景星系成蓝色条纹和弧,给人的错觉

  • 双十二经典广告语汇总

    双十二经典广告语: 1.抢购1天 品味一世 双12当天0点引爆至High 2.1212 抢先购 双12价提前享 聚划算专场 3.201X年最后一波狂欢 大牌放价狂欢大聚惠 高品质 让你放心 好服务 让你省心 4.12.12 工厂直供 年内最后一波 底价史无前例 5.年终盛会 最后狂欢 年末最后一次 6.多彩开始 12.12马上结束 1212最后一发 今年惠不再来 7.12.12相亲会 XX任你选 8.12.12年终盛典 错峰开抢 节前三重礼 9.201X年终大促 品牌盛典 独享巨优惠 10.引爆

  • node.js中的fs.lchownSync方法教程使用说明详解

    方法说明: 同步版的 lchown() . 语法: 代码如下: fs.lchownSync(path, uid, gid) 由于该方法属于fs模块,使用前需要引入fs模块(var fs= require("fs") ) 接收参数: path 目录路径 uid 用户ID gid 群体身份 (指共享资源系统使用者的身份) 例子: 代码如下: fs.lchownSync('content.txt', uid, gid); 源码: 代码如下: fs.lchownSync = function(

热门推荐
  • 吐槽下airmail 吐槽下airmail 前几天看到airmail 1.1正式上线了,冲着它appstore上的截图和中文标题不乱码购买,但实际使用的东西和appstore上截图的东西是不一样的.(我对截图的理解是右边的邮件主体阅读区默认是自动隐藏的,点左边标题才会出现,但现在实际情况是没有这种风格,或者是我没有找到?)如图 还有就是配置里面很多功能是凑数的感觉,比如show badge中的accounts sidebar和status bar是无效的,sidebar中的show mail address是相反的,不勾选状态是显示邮件地
  • 万达圆梦“+互联网”的支点:支付 万达圆梦“+互联网”的支点:支付 据彭博华人富豪榜和亚洲富豪榜截至5月1日的数据,万达集团董事长王健林以381亿美元的身家超过李嘉诚,成为新的"亚洲首富"和华人首富,身价暴涨远甩马云. 万达是传统行业的代表,BAT是互联网公司的代表,两者经常相互不对眼,但谁也奈何不了谁,即使是强如马云,在王健林面前也讨不了好.关于究竟是"互联网+"还是"+互联网",马云和王健林用实际行动从两个不同的方向出发了,但我相信他们的目的地是一致的,打造一个全新形态的商业王国--水乳交融的传统行业+互联网
  • 曼秀雷敦新碧防晒霜的效果怎么样 曼秀雷敦新碧防晒霜的效果怎么样 曼秀雷敦新碧防晒霜的效果怎么样 如今的人们对于自身肌肤保养是比较重视,出门也会涂抹防晒霜之类的产品,这是为了保护肌肤不被晒伤.现在的护肤品也比较多,就防晒霜来说就有很多品牌,曼秀雷敦系列的防晒霜也很不错,新出的曼秀雷敦新碧很受顾客喜欢,这类产品的效果是怎样的? 第一,防晒.新碧水感防晒露的SPF指数为30,作为平常生活中的防晒产品来说也是足够的,用了之后不需要担心皮肤被晒伤或是晒黑.第二,控油.如果脸部肌肤比较油腻的话,那么选择曼秀雷敦新碧更好,这就是适合油性肌肤.使用之后肌肤干爽.自然. 第三