---代码

<!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 伪元素控制其他元素的更多相关文章

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

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

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

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  3. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

  4. jquery 元素控制(附加元素/其他内容)引进和应用

    一个.在内部元素/外部附加元件 append,prepend:加入到该子元素  before,after:元素加入 html: <div id="content"> 在 ...

  5. jquery 元素控制(追加元素/追加内容)介绍及应用

    http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素  ...

  6. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  7. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  8. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  9. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

随机推荐

  1. eclipse代码不能自动提示的问题解决

    步骤如下:window->Preferences->Java->Editor->content assist 替换输入成: 普通:[.abcdefghijklmnopqrstu ...

  2. php 打印今天,昨天，本周，上周，当月，上月，本季，上季，今年，去年数据

    if($filter['mode']) { switch ($filter['mode']) { case 1://今天的数据 $time_start = date("Y-m-d H:i:s ...

  3. CUDA 实现JPEG图像解码为RGB数据

    了解JPEG数据格式的人应该easy想到.其对图像以8*8像素块大小进行切割压缩的方法非常好用并行处理的思想来实现.而其实英伟达的CUDA自v5.5開始也提供了JPEG编解码的演示样例.该演示样例存储 ...

  4. 微信公众平台SDK for node

    实现了下面特性: 1.开启开发人员模式 2.解析微信请求參数 3.验证消息来源 4.被动回复文字消息 5.被动回复图文消息 6.获取access_token 7.创建自己定义菜单 地址:wechat ...

  5. Django的安装使用，以及建立本地网站

    一.安装Django pip install django 完成后即可 二.pycharm 建立django 点击file ——>new project 选择django项目——>more ...

  6. Lightoj 1088 - Points in Segments 【二分】

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1088 题意: 有一维的n个点和q条线段.询问每条线段上的点有多少个. 思路:寻 ...

  7. UIView 的 autoresizingMask 属性 详解。

    转载自:liubo0_0的专栏  链接网址:http://blog.csdn.net/liubo0_0/article/details/7085935 在 UIView 中有一个autoresizin ...

  8. python（14）- 简单练习：登录账户失败三次，账户自动锁定

    题目需求:   1.输入用户名密码   2.认证成功后显示欢迎信息   3.输错三次后锁定 #读取注册用户的信息,用户名,密码,输错次数,写入字典中 user={} with open("D ...

  9. 【转载】ASP和ASP.NET根本区别

    ASP.NET和ASP的最大区别在于编程思维的转换,而不仅仅在于功能的增强.ASP使用VBS/JS这样的脚本语言混合html来编程,而那些脚本语言属于弱类型.面向结构的编程语言,而非面向对象,这就明显 ...

  10. dsp-asic-fpga

    DSP是在模拟信号变换成数字信号以后进行高速实时处理的专用处理器,它采用的是哈佛设计,即数据总线和地址总线分开,使程序和数据分别存储在两个分开的空间,允许取指令和执行指令完全重叠,也就是说在执行上一条 ...