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

最新文章
  • 煮了个.email 米

    英文名.email 明知是学费米,还是手贱注册了.99元一年. 绑着腾讯企业邮箱用用[email protected] 这种前缀看着怎样? --cut-- istark在2016-05-09 09:16:40回答到: mahuateng.email 你可以弄个

  • Storm官方教程中文翻译版

    关于Storm: Storm是由ubuntu的东家Canonical开发的一个python ORM库,设计遵循KISS原则,易于学习,小巧强力,目前支持SQLite.MySQL.PostgreSQL. 关于翻译: 如果发现翻译有严重错误,可以豆邮我. 阅读链接(可能需要特殊工具): https://docs.google.com/document/pub?id=1WnRtdt7OgdGVd7W2pAxxA_6LHpBMcc9KOUwthpK2_ts http://www.sideeffect.m

  • 应用宝还原备份资料时卡住怎么办? 应用宝还原备份资料时卡住怎么办?

    1.在备份应用程序的时候,有些应用程序可能超过100MB,建议应用程序和联系人.通话记录.短信以及书签分开备份; 2.在还原的时候,文件过大会需要一段时间,如果还原时一直卡住,把备份的.bak文件的后缀名改成rar格式,然后再解压一下,看看备份的文件里面有备份的联系人以及相关的文件: 1)如果文件信息都存在,通过应用宝对应功能导入解压后相关文件到手机即可,如联系人的信息表格请在"我的手机=>通讯录"里选择导入即可. 2)如果文件信息都不在,说明在文件备份过程中出了问题,请点击应用

  • 6s 什么时候发货啊

    我 14 号凌晨在官网定的 6s ,今天还是正在处理产品中, 交货: 2015/09/30 - 2015/10/13 由 标准送货 运送 ,有谁跟我是一样的吗? --cut-- susu在2016-05-10 11:26:49回答到: +1 . 应该会提前几天到 lerosua在2016-05-10 11:26:49回答到: 一样一样的,都怀疑苹果有没有收到我的订单了. sest603在2016-05-10 11:26:49回答到: +1 nothingpp在2016-05-10 11:26:4

  • 魔漫相机iPhone版签名使用教程 魔漫相机iPhone版签名使用教程

    1)打开魔漫相机iPhone版后选择你所要制作的漫画,点击页面下方的"签名",然后再点击画笔.(如下图所示) 2)我们可以给漫画任意涂鸦,如果觉得不好要删除也没关系,魔漫相机签名里有相皮檫和清除功能,点击右上角的保存按钮还可以保存到作品集.(如下图所示)

  • 如何利用过滤器来实现WordPress的内链优化

    如何利用过滤器来实现WordPress 的内链优化,最近在做一个新网站,Google 刚开始收录的时候发现归档页面的排名比文章还高,猜测原因是归档页面获得的内链太多了,因此产生一个把所有的指向归档页面的链接全部加上 rel="nofollow" 属性的想法. 要达到这个目的,我们完全可以用 WordPress 强大的 filter 来实现.打开主题的 functions.php ,在里面加上以下的代码: //给标签云里的链接加上 rel="nofollow" add

  • 4种伤身的水千万莫碰,日日坚持必长寿 4种伤身的水千万莫碰,日日坚持必长寿

    1.久置的开水 开水久置以后,其中含氮的有机物会不断被分解成亚硝酸盐. 尤其是存放过久的开水,难免有细菌污染,此时含氮有机物分解加速,亚硝酸盐的生成也就更多. 饮用这样的水后亚硝酸盐与血红蛋白结合,会影响血液的运氧功能. 所以,在暖瓶里多日的开水多次煮沸的残留水.放在炉灶上沸腾很久的水,其成分都已经发生变化而不能饮用了.应该喝一次烧开.不超过24小时的水. 此外,瓶装.桶装的各种纯净水.矿泉水也不宜存放过久.大瓶的或桶装的纯净水.矿泉水超过3天就不应该喝了. 2.淡盐水 有人认为喝淡盐水有益于身

  • 非凡雇主VS最佳雇主 猎聘雇主活动创新路

    2015年7月22日,猎聘网CEO戴科彬携手互联网协会秘书长卢卫,在中国互联网大会上,一道启动了猎聘"2015非凡雇主"活动. "2015非凡雇主"活动首次颠覆传统"最佳雇主"的评选理念,以企业当下和未来是否倡导"非凡"工作态度为标准,寻找40家最具人气和实力的"非凡雇主". 与以往企业和应聘者熟悉的"最佳雇主"类型的雇主评选模式不同,猎聘网"2015非凡雇主"活动主

  • 简约式厨房装修案例 简约式厨房装修案例

    简约式厨房装修案例 简约式厨房 厨房搭配TIPS:温馨格调的厨房装修,半开放式的格局,空间设计很简单,但是巧用灯光打造明亮温馨的效果.厨房的一角还被设计成了小小的吧台,功能很齐全. 简约式厨房 厨房搭配TIPS:欧式格调的厨房装修效果图,餐厨一体的空间,大气雅致.这样的大户型厨房装修,你也可以来借鉴. 简约式厨房 厨房搭配TIPS:小户型厨房装修图借鉴,银色的橱柜设计,搭配黑白的地砖,空间呈现出现代的时尚气息. 简约式厨房 厨房搭配TIPS:黑色魅惑气质. 简约式厨房 厨房搭配TIPS:红黑诱惑

  • 巧用Illustrator绘制设计绘风格涂鸦字体 巧用Illustrator绘制设计绘风格涂鸦字体

    巧用Illustrator绘制设计绘风格涂鸦字体 !设计思路及绘制言法

热门推荐
  • 最平常的六大长寿食物 最平常的六大长寿食物 有些食物,比如大蒜.白菜,你可能常吃,却很少关注他们的功效,它们虽然看起来很平常,却有助健康长寿. 松子清肠 珍珠般的松子,在传统御膳中运用广泛,向来被视为有滋补强身功效.松子丰富的油脂成份,不但可以帮助排便,还可以滋润皮肤.同时,松子是优质的油脂来源,含多元不饱和脂肪酸,可以缓解发炎反应. 如何吃:松子热量较高,平时撒点在饭菜上,每次一小把. 大蒜消炎杀菌 在没有抗生素的年代里,大蒜扮演着重要的救命角色.以往行军时必备盐跟大蒜,盐用来补充矿物质,大蒜则用来杀菌和预防疾病.近来,大蒜也被发现可以
  • 苹果公司发布廉价iPhone迫在眉睫 苹果公司发布廉价iPhone迫在眉睫 美国IT网站Computerworld上周五刊登题为<苹果公司面临威胁:中国成iPhone与Android对战前沿阵地>(Apple faces threat from China, bellwether in battle against Android)的文章称,由于缺少廉价iPhone,苹果(487.22, -4.48, -0.91%)公司的生态系统面临威胁,在开发者心目中的地位也开始降低,而中国市场似乎成了这一趋势的前兆,变成了iPhone与Android对战的前沿阵地. 威胁显现 一
  • 争做实力派 开学季浙江地区金泰克SSD惊喜多多 争做实力派 开学季浙江地区金泰克SSD惊喜多多 又是一年开学时,经过个暑假的休整,又将迎来新的拼搏.挑选给力的装备,才能更好地迎战新的学期.电脑是许多学生开学的必备装备,过去学生党装机都会选择容量大价格便宜的传统机械硬盘,但随着固态硬盘普及,高性价比的固态硬盘现在更受学生青睐.有的同学甚至只需用SSD替换HDD轻松完成电脑升级.对于学生而言,自己还不具备赚钱的能力,用的都是父母的辛苦钱,自然要把这些钱分分花在刀刃上.金泰克SSD一直以原装正片和高性价比深受消费者喜爱.激情9月,还有特惠活动,金泰克体贴地为同学们奉上极具性价比的实力派SSD.
  • 让iPhone回美国生产?美总统候选人可能是对的 让iPhone回美国生产?美总统候选人可能是对的 前不久,美国总统候选人之一唐纳德·特朗普在一次演讲中表示,成为总统之后,将会对苹果公司的 iPhone 等产品征收 35% 的进口税,"要挟"苹果将产品组装线搬到美国,回美国生产.<福布斯>杂志当时算了一笔账,目前iPhone 6s 的零件大约为 80% 来自美国海外,如果征收 35% 的进口税,那么 16GB iPhone 的价格将会上涨大约 65美元.也就是说,如今一台 iPhone 6s 的起售价将由 649 美元上升到 714 美元. 特朗普的"建议&qu
  • 拥有幸福的九个标志 拥有幸福的九个标志 拥有幸福的九个标志 1.一个教会你爱和被爱的人:相信爱情,牵手一个让你变得更好的人,愿岁月静好. 2.生生不息的信念:不轻言放弃,坚信前进就有希望. 3.理想的职业:一份舒心.感兴趣的工作,即使辛苦,也让人觉得充盈而满足. 4.几个可以信赖的朋友:不是最好的时光里有你们在,而是你们在,我才有了最好的时光. 5.背包走天下的健康体魄:身体健康,是一切幸福的来源. 6.安稳平和的睡眠:无论多忙,保证充足的睡眠,让每个清晨遇见神采奕奕的你. 7.品味细小美好的心情:即使世界粗粝,也保持敏感,接受生活的