css hover改变其他id

利用CSS hover伪类改变其他元素的总结

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

CSS hover 改变另外一个元素状态

Part.1 问题我们写页面时也不少遇到这个问题,在没有使用任何预处理语言前提下,当hover 一个元素的时候怎么改变其它的元素? 这里我把它分为两种情况(除自身以外) hover时 1: 改变本身的子元素 2: 改变本身元素的兄弟元素 Part.2 解决第一种情况最常见也相对好解决: 现在我们假设 class1 为父级元素 class2 为子级元素 HTML <div class="class1"> <div class="class2"

css:hover状态改变另一个元素样式的使用

效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height: 150px; text-align: center; margin: 20px 0; color: #FFF; } .change { font-size: 20px; color: #0cf; } /* 情景一:两个是兄弟元素 */ .box:hover+.change { color: re

【笔记】css hover 伪类控制其他元素

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类所以,看看一下代码你就会明白的了 html代码 <body> <div class="hover"> <a href="#">滑动</a> <img src="im

CSS的class、id、css文件名的常用命名规则

CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main

CSS类选择器和ID选择器

CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页面中用到js或者要动态调用对象的时候,要用到id(当然class也会用到,但是id更常用). 第三:id选择器不能结合使用,class可单独使用,也可与其他元素结合使用. 第四:class有多类选择器,id选择器则无,如 <p class="important warning">

div+css样式表的id,class的常用命名规则

div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 Banner 导航 nav 子导航 subNav 菜单 menu 子菜单 subMenu 搜索 search 滚动 scroll 页面主体 main 内容 content 标签页 tab 文章列表 list 提示信息 msg 小技巧 tips 栏目标题 title 加入 joinus 指南 guild

【CSS】class和id命名规则

说明,本篇内容为书籍<高流量网站CSS开发技术>的学习总结,文字出自书本书不错,推荐阅读学习也可参阅网上的博文原载:彬Go链接:http://blog.bingo929.com/css-coding-semantic-naming.html class和id是用来建立CSS到HTML文件内部的衔接注意,有些选择器的写法应考虑浏览器兼容问题,如nth-child选择器,多class选择器.classA.classB(IE6和以前的版本不能理解) 对于元素class和id命名,有几件事要放

CSS active选择器与CSS hover选择器

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /**光标悬浮时**/ .btn_sure:hover{background:url('./7.png');} /**点击前**/ .btn_sure{w

CSS hover

CSS hover hover 鼠标移动到当前标签上时,以下css属性才能生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 创建类 */ .pg-header { /* 固定页面位置 */ position: fixed; /* 设置右 *

CSS的Class以及ID选择器

9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有'jam'class属性的段落.10.这个都差点忘了.页面布局 clear float disply等这几个,关于网站用div+css主要把这个用好.总结:基本上都差不多,css的概念都有了一个了解,必定我们是做web开发,但是css,html前端的我们不能不知道,要

10个CSS+HOVER 的创意按钮

CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们整理了10组网页按钮的点击与悬停效果,每组都有不同的特色以及创意性,下面达人将特效录制成 GIF 动图,方便大家在线观看,若想看真实源代码的,可以点击「查看演示」的链接进行查看. 空间感很强的按钮特效当你的鼠标在按钮上左右晃动时,按钮会自动带有一些3D旋转的空间感,看起来很有科技感啊,该按钮使用

css hover伪类选择器与JQuery hover()方法

css hover伪类选择器它属于anchor伪类在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果实例 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ #art a:hover

css的class， id等常用命名规则

CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:s

wordpress默认css样式class和id集合

你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的.我们将逐一介绍一些最重要的默认WordPress样式,方便初学者快速入门wordpress模板制作的样式定义默认的body样式 .rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid-(id) {}

css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是里外层鼠标上来外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是里外层鼠标上来外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动.