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

最新文章
  • [求助] 关于报表系统以及报表后台数据的疑问

    方法一: 通过定时任务从业务库采集部分数据在内存中经过计算.汇总后存入报表库,前端请求数据直接从报表库内提取的方法 方法二: 通过数据库同步的方式将业务库的数据提取出来在报表数据库中多表联合存成宽表,然后再在报表库中存储汇总信息方 便查询 在公司排到制作报表的工作,现在采用的是方法一,但是之前另一个组的同事说不推荐这种做法,希望我们这边可以通过方法二来做.主要是因为报表的 sql 逻辑都很复杂,他害怕我们这边写出慢 sql 影响到业务库. 所以我想在这跟大家请教,不知道有没有什么稳妥的解决方法的

  • 支付宝为他人充值后怎么查询记录 支付宝为他人充值后怎么查询记录

    如果您是邮箱注册账户,在代充成功后系统会发送邮件到您的邮箱,您可以查收邮件. 代充成功后,您可以立刻打开www.alipay.com登录支付宝账户--点击[交易记录]查询代充的记录.

  • 百度杀毒如何查看最新版本 百度杀毒如何查看最新版本

    百度杀毒若要查看最新版本,可以在百度杀毒官网:http://shadu.baidu.com查看和下载最新版本的百度杀毒软件.

  • 限制Excel使用所有的粘贴方法

    在Excel中限制使用粘贴功能,可以有效防止用户将外部的数据复制粘贴到本工作薄. 以下是实现在Excel中使用粘贴功能的方法. 一.实现原理 使用VBA代码来实现,实现的理论指导是: 禁用编辑菜单中的粘贴功能 禁用编辑菜单中的选择性粘贴功能 限制使用右键菜单中的粘贴功能 限制使用键盘上的快捷键Ctrl+V键 二.实现方法 ①禁用粘贴功能的代码 Private Sub Workbook_SheetSelectionChange(ByVal Sh As Object, ByVal Target As

  • 手机时光网如何查看预告片 手机时光网如何查看预告片

    1)打开时光网,点击影片进入详情,点击[影片]播放.进入预告片页面后点击你要播放的[预告片].(如下图) 2)进入播放页面后,接着点击屏幕上方[﹀].接着接着选择你需要的清晰度即可.(如下图)

  • 观看天津爆炸新闻有感作文600字

    近几天,我在电视上看到了一则让人难过.悲伤的新闻,这使我有感而发,不如,让我把新闻给你娓娓道来吧. 在前几天的晚上,天津某个港口发生了一个惊天动地的大爆炸.这一炸,火光冲天.热浪四溢.附近的居民听到爆炸声后,便惊慌失措地向消防局打电话,请求给予帮助.消防官兵火速赶到现场,周围的房屋.汽车.树木都已被炸毁,方圆几里都受到了不同程度的损坏.由于爆炸猛烈,周围全部成为废墟,港口被熊熊的大火给包围住了.所有的消防官兵都十分镇静,一个个小心翼翼地冲到火海里,英勇地用消防水枪射向熊熊烈火.突然,第二次爆炸发

  • 是否能推荐几本好的学习CSS和W3C好的方法或者书籍

    标签: 书籍, css, 推荐 我是学习平面设计,主要是设计,所以没有很深层次的接触,因为工作需要,需要用最短的时间接触并能基本制作专业网站,有没有好的网站或者书籍,先谢谢了 最佳答案 <CSS权威指南><CSS网站布局实录> 再加上一本 css工具手册 边做边查,学起来很快的, 我就用了1个周 ··

  • 小熊“食神”家用绞肉机 美食快到碗里来 小熊“食神”家用绞肉机 美食快到碗里来

    平时为一顿饺子剁馅料到手臂酸痛而烦恼?切辣椒洋葱是被呛到泪流咳嗽?害怕剁肉过程中有飞溅从而导致细菌滋生?根据厨房绞肉的需求进行精心设计的小熊家用绞肉机,在绞肉的同时不仅保持厨房卫生,更保持食材的原汁原味和营养不被破坏,助你轻松变身食神. 推荐新品:小熊家用绞肉机QSJ-B02D1 小熊这款家用绞肉机两刀头不锈钢绞肉轴,S型刀片,独有立体角度,增加绞碎空间,旋风式彻底绞碎搅拌,匀称精细,食物口感更细腻.刀片之间距离更宽,绞碎空间充足,分量当然更大. 材质方面,小熊家用绞肉机采用PP材质上盖,健康卫

  • Win8如何收藏图片? Win8如何收藏图片?

    Win8系统的Metro界面非常具有创意也非常漂亮,但是Metro界面中的相片下的图片库,一开始打开后是没有图片的,那么我们该如何把自己喜欢的图片收藏到图片库里呢? 1.首先我们打开我的电脑--库--图片 2.然后我们右键图片--属性 3.在弹出的窗口中我们点击添加 4.然后将我们准备好的照片找出来,添加文件--应用--确定

  • 霸气好听情侣签名说说_手放口袋谁都不爱

    很多时候再苦再累也能扛住咬着牙忍住不让自己倒,反倒是突如其来的肩膀一下子就能让人放松下来 1.情侣签名:要爱到什么程度,才能够大彻大悟. 2.㈠朵花绽放的时间 3.那本旧作文她的字很温柔,, 4.我能说什么怪你多情还是我太专情我能想什么怪你存在还是我太多余 5.最长的永久还是只并肩一半 6.手放口袋谁都不爱. 7.下一个雨季.我们擦肩而过而已. 8.不要仗着我爱你,就可以为所欲为.不要仗着莪爱你,就可以胡作非为. 9.我们说好了在一起就在一起.合不来.我们说好了不是不要在一起.分不开. 10.先

热门推荐
  • 《郊遊》— 用最平淡的題材來作告別 《郊遊》— 用最平淡的題材來作告別 http://www.inmediahk.net/node/1019176 宮崎駿宣佈退休的同時,這個導演也像與他夾好的,宣佈收山不再拍片.假若理由真的是他的作品不容於在商言商的電影圈裡,他也奇蹟地支撐了很久.最後的<郊遊> (Stray Dogs) 也在威尼斯摘了評審團大獎,算是走得風光.但即使如此,卻不會有片商想到借機大賺一筆,因看過他作都知,拿數間戲院出來給他作上正場,即使只上一星期,也是自殺行為. --cut-- hylau在2013-11-23 23:56:4回答到: 蔡明亮 Mar
  • CF重生的第四代消音狙击—骑士SR25-SS CF重生的第四代消音狙击—骑士SR25-SS 如果提到knight SR25,我相信很多人都没见过,包括小N这种冷门枪挖掘者都没注意到过这把连发的狙击枪.但是随着SS系列的问世,骑士SR25得到了重生,全新的骑士SR25颠覆了传统的狙击枪,今天让我们一起走近骑士SR25-SS. 一.枪械的基本信息. 我并没有找到这把枪现实中的样子,这是一把美军M16系列的半自动狙击枪,枪机等方面的设计与M16基本相同,枪长1117毫米,重量4.88千克,携弹量10/20发. 本次登场的骑士SR25-SS可谓浴火重生,不仅加挂了消音器成为CF中第四把消音狙击
  • 让知识更接地气 百度首届高校搜索营销大赛圆满落幕 让知识更接地气 百度首届高校搜索营销大赛圆满落幕 1月18日,百度首届全国高校搜索营销大赛颁奖典礼在北京举办,大会揭晓了本次搜索营销大赛的团队赛各项大奖,来自于西安交通大学的参赛团队,依靠对搜索营销的深刻理解.巧妙的创意和策略,以及高效的投放效果,一举揽走了特等奖.南阳理工学院.杭州师范大学阿里巴巴学院.南开大学的三支团队紧随其后,获得一等奖. 百度全国高校搜索营销大赛颁奖会 作为第一届面向全国高校大学生的搜索营销大赛,该活动受到了全国上百所高效营销.广告等专业学生们的关注和参与,主动报名人数达到13600人,覆盖1177所主流高校,在线考试分
  • 联想乐檬K3定时开关机怎么设置 联想乐檬K3定时开关机怎么设置 联想乐檬k3手机有一个新功能就是可以实现开关机的定制了,我们通常可以让手机在指定时间开机与关机了非常的简单,下面一起来看它的设置步骤. 1)我们在手机中点击[设置]然后在进入之后找到下面的[定时开关机]之后在此我们点击[时间].(如下图) 2)在此就可以对开机时间进行调协了,我们可以设置[时间]跟[重复]条件,最后点击[完成]即可.(如下图) 其实关机或定时开机的设置非常的简单,当然还有一些第三方软件可以实现了,不过小编觉得应该是需要获得root权限才可以的哦. s