Hover属性的充分利用

2024-05-15 10:45:39

翻译自：web designer wall

通常，我们改变：font color，font styles， border styles，background等属性来实现hover的划过效果。但是其实我们可以运用hover做更多的东西。我们可以运用它美化设计，减少混乱和显示更多的额外信息。在这篇文章中，我将展示许多站点出色运用hover属性的例子，同样，我也将提供一个快速的教程，来实现不同的hover效果，so，read on。

1.使用hover美化布局

我用hover美化了IconDock的布局。举个例子，当鼠标滑过blog的标题或者边栏链接，就会有一个箭头显示出来。

2.运用hover属性减少混乱

QBN布局看起来比较清秀，原因在于影藏了一些额外的默认按钮。鼠标滑过一个连接块的时候，按钮就会显示出来。想象一下把这些按钮都显示出来是多么的混乱呀！

Gucci精心设计产品图片，把有关的描述变更影藏起来。鼠标滑过图片，描述板块显示出来，你还可以点击上面的链接。

3.运用hover显示附加信息（tooltip）

Coda结合CSS和javascript设计出非常漂亮的tooltip工具提示。滑过的时候，额外的关于他们软件的提示信息淡入进来。

在Best Web Gallery站点上，我用Jquery的遮罩效果显示较大图片。

教程

Image Hover（示例）

下面是模仿Bucci和QBN显示影藏的.Link链接部分的hover效果。当鼠标滑过<div>块，设置链接块的display：block。

非常酷的Hover效果（示例）

运用Jquery激活<em>文本当鼠标滑过链接，类似于Coda站点。阅读我的jQuery教程进一步学习。

jQuery tooltip

前往CSS Globe站点看看我用在Best Web Gallery中的jQuery toolrip。

转载于:https://www.cnblogs.com/island205/archive/2009/12/19/1627569.html

Hover属性的充分利用相关推荐

CSS笔记-除了a标签外的hover属性的应用
CSS笔记-除了a标签外的hover属性的应用内容简介:以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: div a href=# img alt=i am ...
css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
css中hover属性的使用技巧
hover属性用不同的书写方式,来改变不同关系的元素样式. 元素:hover 表示聚焦后改变自己元素:hover 元素表示聚焦后改变其子元素元素:hover + 元素表示聚焦后改变其指定的&q ...
常见CSS鼠标悬浮动画-hover属性
文章目录 1. Grow-Shadow 2. Move-Shadow 3. Curl-Bottom-Right 1. Grow-Shadow 鼠标移入盒子放大并出现底部阴影效果: 代码 <di ...
CSS的hover属性
1.hover的定义 :hover在鼠标移到链接上时添加的特殊样式 :hover适用于任何元素 2.hover的使用方法用法1:控制自身的样式鼠标悬浮在元素上改变元素样式,改变本身的背景颜色,例如 ...
八大经典优雅的CSS鼠标悬浮动画-hover属性
相信大家也有为自己做的hover效果不太满意的,本文给大家介绍几款不错的css鼠标悬浮动画,老规矩,复制粘贴即用. 1.Grow-Shadow 效果: 代码: /* Grow-Shadow */ .h ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录一.什么是CSS 二.CSS的三种样式及其优先级三.CSS基本选择器及其优先级四.其他常见的选择器五.选择器优先进阶六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
HTML中a:link,a:visited,a:hover,a:active
原文地址:http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html 1:解释 link:连接平常的状态 visited:连接被访问 ...

最新文章

热门文章