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

最新文章
  • 求助:如何把 thunderbird 的消息过滤规则导入到 Mac 自带 Mail 里

    最近邮件多了,thunderbird 开始卡,准备换 Mac 自带的 Mail 试试. 有没有什么办法可以把 thunderbird 的消息过滤规则批量导入到 Mail?我这里几十条规则,手工加的话要累死了 --cut--

  • Centmin Mod

    Centmin Mod - LEMP (Linux, Nginx, MariaDB MySQL & PHP-FPM) web stack for CentOS 6.x Linux (also Oracle Linux 6.x and CentOS 7 soon) by George Liu (eva2000) with a shell menu based installer (shown on the right). The shell based menu allows you to do

  • Mac 下有什么好用的游戏手柄么,当然最好是无线的。

    我不太清楚,是不是所有手柄都可以在Mac下使用,我看好多人都在用Xbox360无线手柄,我也不知道具体怎么样,刚下了个2K,准备捡起来玩玩,求推荐. --cut-- loniper在2014-06-25 16:17:1回答到: 同问! omi4399在2014-06-25 16:26:2回答到: Xbox one手柄你值得拥有 Elizen在2014-06-25 16:34:5回答到: @omi4399 确定?那东西单卖么? Sivan在2014-06-25 16:39:4回答到: 我用的 Xb

  • 滴滴打车百万红包怎么领取 滴滴打车百万红包怎么领取

    滚雪球和滴滴合作通过,提出"理财滚雪球,出门靠滴滴"的口号.给滴滴的用户发红包,每个用户领取的红包金额都不低于百元,包含顺风车.快车.转车等不同类型的打车券.这些打车券会自动放入滴滴账户,宣传页面提供优惠券的同时也有滚雪球的入口或者二维码,有需求的用户可以点进去了解. 滚雪球则是金斧子携手顶级金融机构打造,专门针对年轻人的理财平台,由华尔街十年风控团队护航,针对年轻人,最安全最易上手的理财平台,是目前领先的互联网理财平台. 据了解,滚雪球是金斧子在移动理财端的延伸.滚雪球为投资者准备了

  • 北京的立春习俗 北京的立春习俗

    本站阅读配图 北京的立春食俗:吃春饼.每年立春日,北京人都要吃春饼,名曰"咬春".春饼薄如蝉翼,这里记载的是用稀面在一种平锅上抹一下,即成极薄透明的饼,用来包荠菜馅,然后用油炸出的春卷(又称春盘).春饼.春卷是古人心目中的春的象征. 北京人吃春饼是用白面擀成圆形的饼,经烙制而成.清<调鼎集>记载春饼的制法是"擀面皮加包火腿肉.鸡肉等物,或四季时菜心.油炸供客.又咸肉腰.蒜花.黑枣.胡桃仁.洋糖(白糖)共碾碎,卷春饼切段."这是清朝的吃法.但现在演变为春饼

  • 花生叶螨病防治技术

    花生叶螨在每年3月下旬开始活动,4月下旬至5月上旬迁入花生田为害,6-7月间为发生盛期,对春花生可造成局部为害.7月中旬雨季到来,叶螨发生量迅速减少,8月份天气干旱可再次大发生,在花生荚果期造成为害.9月中下旬花生收获后迁往冬季寄主,10月下旬开始越冬. 花生叶螨群集在花生叶的背面刺吸汁液,受害叶片正面初为灰白色,逐渐变黄,受害严重的叶片干枯脱落,严重影响了花生叶片的光合作用,阻碍了花生的正常生长,使荚果干瘪,大量减产. 防治方法 (1)农业防治合理轮作,避免叶螨在寄主间相互转移为害;花生收获后

  • 素面朝天是一种真诚的自信 素面朝天是一种真诚的自信

    素面朝天.我在白纸上郑重写下这个题目.夫走过来说,你是要将一碗白皮面,对着天空吗? 我说有一位虢国夫人,就是杨贵妃的姐姐,她自恃美丽,见了唐明皇也不化妆,所以叫--夫笑了,说,我知道.可是你并不美丽. 是的,我不美丽.但素面朝天并不是美丽女人的专利,而是所有女人都可以选择的一种生存方式. 看着我们周围.每一棵树.每一叶草.每一朵花,都不化妆,面对骄阳.面对暴雨.面对风雪,它们都本色而自然.它们会衰老和凋零,但衰老和凋零也是一种真实.作为万物灵长的人类,为何要将自己隐藏在脂粉和油彩的后面? 见一位

  • WINNER《空虚》歌词 WINNER《空虚》歌词

    공허해(空虚) - WINNER 거울 속에 내 모습은 텅 빈 것처럼 공허해 혼자 길을 걸어봐도 텅 빈 거리 너무 공허해 Da ra dat dat dat dat dat dat, Baby don't worry 너란 꿈에서 깬 현실의 아침은 공허해 아침을 맞이 하면서 다시 자각해 날 깨워주는 건 네가 아닌 알람벨 빌어먹을 침대는 왜 이리 넓적해 허허벌판 같은 맘에 시린 바람만 부네 나는 빈 껍데기 너 없인 겁쟁이 주위 사람들의 동정의 눈빛이 날 죽게

  • 手机天猫怎么删除范儿照片?天猫删除范儿相片的方法 手机天猫怎么删除范儿照片?天猫删除范儿相片的方法

    手机天猫怎么删除范儿照片?范儿照片其实就是一个照片管理了,像前面我介绍的头像修改也在这里面了,下面一起来看看范儿照片删除方法. 1)我们登录手机天猫,然后点击[范儿],进入后找到[头像]点击打开进入[我的范儿].(如下图) 2)现在我们找到要删除的照片,然后点击[分享]按钮(很多朋友在此就找不到删除在哪了,我们点击分享没错).(如下图) 3)然后在弹出的分享中会看到有一个[删除]就完成啦,返回[我的范儿]刷新下是不是没了呢.(如下图) ps:此操作有点让人搞不清楚头脑了,删除居然在分享中删除而不

  • 递归出来的数据,如何可以做分页呢

    递归出来的数据,怎么可以做分页呢 <% CountPv Session( "LoginID ") Function CountPv(GuestID) Set Pv = conn.Execute( "select LoginID,GuestID,LoginName,PvRecord,Time from PvRecord where GuestID = ' "&GuestID& " ' ") While Not Pv.eof A

热门推荐
  • 「即刻 app」寻找 Node 工程师 / 前端工程师 「即刻 app」寻找 Node 工程师 / 前端工程师 如果你觉得即刻正在做一件很有趣的事情,为什么不考虑加入我们呢? 邮件: [email protected] app :即刻 后端工程师 职位要求: 熟悉常用数据结构和算法, 熟练掌握至少一种服务端开发语言, 如 python, java, C++等. 熟悉 linux 系统常用命令, 能够在 linux 环境调试或排查错误. 对 HTTP 协议有一定理解, 能够从网络层排查问题. 能够编写自动化测试代码. 良好的英文阅读能力. 以下非必须要求(加分项): 熟悉 Nodejs/mongodb 了解
  • 木瓜的功效与作用及注意事项 木瓜的功效与作用及注意事项 木瓜的功效与作用及注意事项 本站阅读配图 木瓜作为水果食用的实际是番木瓜,番木瓜果皮光滑美观,果肉厚实细致.香气浓郁.汁水丰多.甜美可口.营养丰富,有"百益之果"."水果之皇"."万寿瓜"之雅称,是岭南四大名果之一. 木瓜富含17种以上氨基酸及钙.铁等,还含有木瓜蛋白酶.番木瓜碱等.半个中等大小的木瓜足供成人整天所需的维生素C.木瓜在中国素有"万寿果"之称,顾名思义,多吃可延年益寿.那么它到底有哪些功效及作用呢?今天就带大家详
  • Github 又被攻击了? 各种幼女控页面。 Github 又被攻击了? 各种幼女控页面。 Twitter上老外也在抱怨. --cut-- LazyZhu在2016-05-11 06:06:18回答到: https://status.github.com/messages Phariel在2016-05-11 06:06:18回答到: @LazyZhu 恩,的确是部分repo,现在好像又稳定了. plqws在2016-05-11 06:06:18回答到: 看到标题,进来白兴奋了一场-- riaqn在2016-05-11 06:06:18回答到: unicorn- fu82581983在
  • 微盟推V店App 将成微商首选分销平台 微盟推V店App 将成微商首选分销平台 2015年3月5日 中国上海 国内知名的微信第三方服务商微盟5日宣布,向公众推出基于移动端的C2C微商平台"V店"App, V店将为个人微商解决货源.全渠道推广难题,帮助其一键完成订单.交易.支付及分佣等流程.V店的推出宣告深耕B2C微商市场的微盟正式杀入C2C微商市场.微盟方面表示,V店将免费为个人微商服务. 微盟成立于2013年4月,致力于为基于微信平台的B2C微商提供一整套行业解决方案,截止2015年2月底,微盟拥有1000家代理商,超过一百万家商户使用微盟旺铺产品和微盟社会化分
  • 教你用AI简单绘制漂亮的电话线 教你用AI简单绘制漂亮的电话线 本教程是向大家讲解AI简单绘制漂亮的电话线的方法及过程,教程绘制出来的电话线效果很漂亮,方法也很简单,非常适合初学者学习.感谢原创作者gorliya的分享.好了,我们先来看看最终效果图吧! 绘制步骤如下: 教程结束,以上就是教你用AI简单绘制漂亮的电话线方法,希望大家喜欢!
  • Excel2000如何创建计算公式 Excel2000如何创建计算公式 Excel2000如何创建计算公式: 下面将要为某公司的经营情况创建一张电子报表,并使用计算公式做一些统计,请先按下列步骤进行操作. 步骤一.单击屏幕左下角处的Sheet 3标签,然后在A1单元格中开始书写"北京分公司本月收支一揽表"字样,并设置好字体与字号(即字的大小尺寸),如图 2所示. 图 2 输入新的报表标题 图 3 输入纵.横栏目与标题名 步骤二.在B2.C2.E2.F2单元格中分别输入"收入/月"."支出/天"."员工工资&