通过 :hover 伪元素控制其他元素
---代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
width: 200px;
height: 200px;
background: red;
} #test:hover+#test2{
width: 100px; } #test2{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="test"> </div> <div id="test2"> </div>
</body>
</html>
这里要注意，这个方法不能选择用于同级和子元素。
通过 :hover 伪元素控制其他元素的更多相关文章
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- jquery 元素控制(追加元素/追加内容)
参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...
- jquery 元素控制(附加元素/其他内容)引进和应用
一个.在内部元素/外部附加元件 append,prepend:加入到该子元素 before,after:元素加入 html: <div id="content"> 在 ...
- jquery 元素控制(追加元素/追加内容)介绍及应用
http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素 ...
- CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素
.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!
- 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果
映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...
- CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
随机推荐
- javascript --- 兼容的那些事
绑定事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type ...
- Mac环境下安装运行splash
http://blog.csdn.net/chenhy8208/article/details/69391097 最近需要使用scrapy爬虫做一些开发,用到了splash.我本机是mac环境,跳着看 ...
- webpack入门（六）——html-webpack-plugin
html-webpack-plugin 该插件可以简化创建调用webpack bundles的html文件.在每次编译后,文件名会包含有hash值的bundles 特别有用.你可以让插件为您生成一个H ...
- DataSource是什么
public interface DataSource 该工厂用于提供到此 DataSource 对象表示的物理数据源的连接.作为 DriverManager(二者区别:http://tobylxy. ...
- FFmpeg源码简单分析：结构体成员管理系统-AVOption
===================================================== FFmpeg的库函数源码分析文章列表: [架构图] FFmpeg源码结构图 - 解码 FFm ...
- mongodb3.0 性能測试报告 二
mongodb3.0 性能測试报告 一 mongodb3.0 性能測试报告 二 mongodb3.0 性能測试报告 三 測试环境: 服务器:X86 pcserver 共6台 cpu: 单颗8核 ...
- mysql字符太长警告
用navicateclient,打开相应的数据库. 打开函数.找相应的val()函数,进行编辑,就能够!编辑范围为4000
- SpringMVC学习（一）：搭建SpringMVC-注解-非注解
文章参考:http://www.cnblogs.com/Sinte-Beuve/p/5730553.html 一.环境搭建: 目录结构: 引用的JAR包: 如果是Maven搭建的话pom.xml配置依 ...
- JavaScript事件在WebKit中的处理流程研究
本文主要探讨了JavaScript事件在WebKit中的注冊和触发机制. JS事件有两种注冊方式: 通过DOM节点的属性加入或者通过node.addEventListener()函数注冊: 通过DOM ...
- Tomcat appears to still be running with PID 19564. Start aborted
产生原因:tomcat 异常关闭, 或强行终止导致(如断电等....) 如你所见 . tomcat 在linux 关, 关不了. 开开不了. 疯狂百度一个小时以后,大致产生问题的原因是,LINUX ...