<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.hoverfa>a{ text-decoration:none; color:#000;}
.hoverfa:hover{ border-bottom:#6CF 1px solid; }
.hoverfa:hover a{ color:#6CF; text-decoration:none;}
.hoverfa:hover span{ color:#FFF; background:#6CF;} //该元素的子元素

.hoverfa:hover +.hoverfa1{ background:#FC6;}  //其他元素
</style>
</head>

<body>
<div class="hoverfa">
<span>实时动态1</span>
<a href="#" class="admin_icon">实时动态1实时动态1实时动态1实时动态1实时动态1</a>
</div>

<div class="hoverfa1">
<span>实时动态2</span>
<a href="#" class="admin_icon">实时动态2实时动态2实时动态2实时动态2实时动态2</a>
</div>
</body>
</html>

css小记：hover 鼠标滑过让该元素的子元素或者其他元素改变样式的更多相关文章

  1. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  2. CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  3. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  4. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  5. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  6. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  7. css - a:hover变色问题

    今天在帮我们学校做网站的时候,由于在css这里不是很擅长,过程中发现一个问题,a:hover的时候,字体的颜色不变.后来才发现将a和div的嵌套的问题, 我的css代码为: .left_box .lb ...

  8. 鼠标滑过元素，div显示，并根据scrollTop向下移动

    如上图所示,通道有很多个,表格只有一个. 注意:滑过通道时鼠标如果停留在上面,那么表格才显示,鼠标滑过表格时,表格不消失 <div id="lineContent"> ...

  9. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

随机推荐

  1. js切换全屏

    直接撸代码 //<a id="fullscreen">切换按钮</a> $('#fullscreen').bind('click',function () ...

  2. HDU 5974 A Simple Math Problem ——（数论，大连区域赛）

    给大一的排位赛中数论的一题.好吧不会做...提供一个题解吧:http://blog.csdn.net/aozil_yang/article/details/53538854. 又学了一个新的公式..如 ...

  3. IntelliJ IDEA 2017.3 搭建一个多模块的springboot项目（三）

    你得先看完前两篇文章才可以进行第三章.这章我又新建了一个模块,起名叫project-core.建立方式与(一)里面一致,一个普通的maven模块.不需要勾选archetype的那种. 大家自己建好后, ...

  4. 使用create-react-app创建项目（一）——端口配置

    在package.json文件中找到 "scripts",在start中添加"set PORT=8000" "scripts": { &qu ...

  5. python 字符串（str）和列表（list）的互相转换

    1.str to list  str1 = "12345"list1 = list(str1)print list1 str2 = "123 sjhid dhi" ...

  6. 2965 -- The Pilots Brothers' refrigerator

    The Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27893 ...

  7. Mysql 查询当前数据上一条和下一条的记录

    获取当前文件上一条与下一条记录的原理是上一条的sql语句,从news表里按从大到小的顺序选择一条比当前ID小的新闻,下一条的sql语句,从news表里按从小到大的顺序选择一条比当前ID大的新闻. 如果 ...

  8. C++之ListNode

    单链表,弄清楚可stl中list的区别 ListNode的结构 struct ListNode { int val; //当前结点的值 ListNode *next; //指向下一个结点的指针 Lis ...

  9. Redis Guide

    1. Redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数 ...

  10. Java集合(0)：概述

    下面是一个Java集合的简化图,我们可以看出,集合分Collection和Map两大部分: 接下来分别以下面几个章节介绍Java集合: Java集合(1):Collections工具类中的static ...