利用 hover 伪类创建纯 CSS 收缩面板

SVN 源码/例子：http://naturaljs.googlecode.com/svn/trunk/demo/widgets/hoverTab.htm

这是一个非常简单的例子，主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时，该元素会产生高...

文章

sp42

2013-12-29

764浏览量

css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？

我的思维大概是这样的-----有一个导航栏，用css写了hover事件，鼠标放上去会变成蓝色；

下面就有一个需求，点击导航某一项页面不会跳转，还在本页面，点击哪一个让哪一个变成蓝色，其余的为灰色的，但是当我点击完成之后，hover事件就会失效，不起作用了，

我的css代码是这样的

.content...

文章

leonwuv

2016-11-04

1115浏览量

Hover States - 有趣的用户界面及交互设计

Hover States 一组新潮的和有趣的用户界面和交互设计的集合。Hover States 的目标是要成为设计师和开发人员灵感来源，向人们展示目前人们正在做的各种网站中令人惊奇的效果。他们认为交互设计的美是它的动作和行为，这就是为什么他们展示他们发现的所有视频内容的方式。

马上去...

文章

秋天风景

2015-01-13

746浏览量

分享5种风格的 jQuery 分页效果【附代码】

jPaginate 是一款非常精致的分页插件，提供了五种不同风格的分页效果，支持鼠标悬停翻页，快速分页功能。这款插件还提供了丰富的配置选项，你可以根据需要进行设置。

效果演示      源码下载

各个效果的使用示例代码：

$(function() {

$("#dem...

文章

秋天风景

2014-10-13

777浏览量

less学习-嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }

#header .navigation {

font-size: 12px;

}

#header .logo {

width: 300px;

}

#...

文章

fbh

2018-08-16

593浏览量

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。

给平淡的站点带来活力

hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CS...

文章

powertoolsteam

2011-05-10

807浏览量

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。

给平淡的站点带来活力

hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CS...

文章

技术小阿哥

2017-11-14

814浏览量

仿酷狗音乐播放器开发日志八——播放列表的实现三

昨天做了hover状态下的CMusciListItemUI控件，也就是列表项元素，然后今天还是在Firework里对实际酷狗的软件元素进行定位，然后做了一个被选中状态下的CMusciListItemUI控件的元素，粗略看一下和原版的效果差不多，如图

下面是原软件效果图    不...

文章

redrain.

2014-07-26

649浏览量

Hover.css：一组超实用的 CSS3 悬停效果和动画

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox...

文章

秋天风景

2014-01-08

751浏览量

CSS鼠标悬浮DIV后显示DIV外的按钮

昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。

效果如下：

问题：

在DIV hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要移到按钮上过程中，离开了DIV经过间距时，按钮就会消失。

解决办法...

文章

技术小美

2017-11-19

806浏览量

CSS动画简介

现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。

但是，CSS动画除外，它实在太有用了。

本文介绍CSS动画的两大组成部分：transition和animation。我不打算给出每一条属性的详尽介绍，那样可以写一本书。这篇文章只是一个简介，帮助初学者了解全貌，同时又是一个快速...

文章

阮一峰

2016-06-07

1296浏览量

中英字体不同导致的下划线不对齐问题

如果网页中定义的中英文字体不同，这会导致下划线不对齐。这种情况在IE浏览器中存在，Firefox浏览器无此问题。解决办法是：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeH...

文章

秋天风景

2009-01-16

553浏览量

CSS3 制作一个边框向周围散开的按钮效果

我们将要达到的是如下的效果(若效果未出现请刷新)：

分析

主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。

由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式

通过对按钮的:after状态添加一个内容为空的元...

文章

刘哇勇

2014-03-16

689浏览量

开发一个自己的 CSS 框架(一)

这是一个系列，带着大家封装一个纯 CSS 框架，从零学习 SASS 语法。

代码仓库点我传送

因为简单，强依赖原生 Javascript 对虚拟 DOM 不友好(如 React、Vue、Angular)，使用虚拟 DOM 对使用原生 Javascript 编程(JQuery)不友好。没有代码...

文章

我是小助手

2018-07-09

1414浏览量

CSS伪类的三种写法

今天逛蓝色时，无意发现了有人讨论伪类的正确写法，让我对伪类的认识也更清晰了，转贴于此，以备日后查询(原贴当时没记下地址，已经记不得了)

CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.C...

文章

杨俊明

2009-03-04

665浏览量

CSS学习(四)

伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value...

文章

橘子红了呐

2017-11-13

698浏览量

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard的安装方法首先需要下载 Zer...

文章

嗯哼9925

2017-11-23

875浏览量

总结CSS3新特性(Transition篇)

CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。

Tra...

文章

贾顺名

2015-07-21

625浏览量

开发ASP.NET AJAX客户端定制行为

一、 简介

ASP.NET AJAX框架为开发者提供了三种方案用于扩展该框架的客户端功能：行为，可视化组件及非可视化组件。这三类组件分别对应于 Sys.UI.Behavior，Sys.UI.Control及Sys.Component。因为在以前的文章中，对这三个概念有细致介绍，所以在此不...

文章

技术小甜

2017-11-08

588浏览量

45个非常奇妙的 CSS3 特性应用示例

这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和...

文章

秋天风景

2011-12-29

765浏览量

【技术贴】关闭Myeclipse|eclipse鼠标悬停时的代码函数提示

本来本子的屏幕就小，配置就低，结果鼠标一停，指向了某个函数之后，整个页面就弹出了函数提示，而且纯英文的，十分不爽。下面是解决办法：

------------------------------

Window->Preferences->Java->Editor->H...

文章

落雨_

2011-10-13

672浏览量

一个有趣的鼠标移上去的动画-整理

屏幕录制gif的软件不好用，就用三张截图说明动画效果吧：

我比较喜欢的是他那个边框描边的动画，于是做了整理，提取关键代码如下

结构

1 <ul class="animate">

2 <li>

3 <a...

文章

鋒o丫头

2017-09-21

676浏览量

JQ-动画合集(ing...)

一：给向上按钮加动画，让页面卷回上面而不是生硬跳转.js

$('#topBtn').click(function(){

$('html,body').animate({scrollTop: '0px'}, 1000);

return false;

...

文章

鋒o丫头

2017-01-05

533浏览量

让你的网页动起来的秘诀

今天隆重的推荐一个纯CSS实现的现代化具象派史诗级大作。 CSShake.一款能让你的网页元素舞动起来的神奇样式表。

样例Demo

说的再多不如来张图片给力，下面我强烈建议看到这篇文章的童鞋看看下面的这个网站csshake展示页面

怎么用

CSShake使用起来也是很简单的，我们既可以将...

文章

郭璞

2016-07-25

553浏览量

学习使用 CSS3 制作网站面包屑导航效果

作为最重要的导航展示形式之一，面包屑导航能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面。在本教程中，您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。

效果演示     插件下载     详细教程

HTML示例代码：

文章

秋天风景

2014-10-31

620浏览量

CSS的基本样式

CSS的基本样式

1   CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

2   CSS的背景

属性

描述

background-attachment

背景图像是否固定或者随着页面的其余部分滚动

background-color

设置元素...

文章

科技小能手

2017-11-12

725浏览量

【译】使用 currentColor 属性写出更好的 CSS 代码

本文讲的是【译】使用 currentColor 属性写出更好的 CSS 代码，

总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持，但却很少被开发者使用。 currentColor 就是这样的属性之一。

MDN 把 currentColor 定义为:

currentColor 代...

文章

玄学酱

2017-10-18

837浏览量

浅谈Web前端开发中的Touch事件

如今移动设备变得越来越流行，在提供便利性的同时，触摸屏也使得用户逐渐摆脱了对传统键盘和鼠标操作的束缚，人机交互更加方便。这不仅体现在强大和多样化的APP应用程序上，Web应用程序同样也由于触摸屏的兴起而变得更加丰富多彩。例如在传统设备上用户利用鼠标(包括触摸版)和键盘来操作网页，放大图片、拖拽元素...

文章

浣熊干面包

2017-11-08

730浏览量

表格和表单

一、表格

1、表格标签：

table 表格

thead 表格头

tbody 表格主体

tr 表格行

th 元素定义表头

td 元素定义表格单元

2、表格样式重置

1、table{border-collapse:collapse;} 单元格间隙合并

2、th,td{padding...

文章

我巴巴

2017-09-12

969浏览量

【转】CSS transitions#CSS3变换入门

尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。

比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。

这...

文章

秋天风景

2010-07-09

775浏览量