---代码

<!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. Parallel Database for OLTP and OLAP

    Parallel Database for OLTP and OLAP Just asurvey article on materials on parallel database products ...

  2. linux 文件属性与权限

    内容源于: 鸟哥的linux私房菜 链接如下: Linux 的文件权限与目录配置 Linux 磁盘与文件系统管理 Linux 文件与目录管理 目录 Linux文件属性 [文件属性解析(SUID/SGI ...

  3. ARC forbids Objective-C objects in structs or unions

    解决方法有二种: 1.在出错的地方加入__unsafe_unretained 2.关闭系统ARC.1.点击project   2.点击Build Setting    3.找到其以下的Objetive ...

  4. js增加收藏

    <html> <span style="white-space:pre"> </span><head> <span style ...

  5. MySQL插入数据性能调优

    插入数据性能调优总结: 1.SQL插入语句调优 2.如果是InnoDB引擎的话,尝试开启事务,批量提交 3.调整MySQl数据库配置     参考: 百度空间 - MySQL插入数据性能调优 CSDN ...

  6. soapUI学习笔记---断言的小使用

    转自:http://www.cnblogs.com/duimianyoushan/p/4274791.html 以下示例在soapUI 4.5中进行.刚开始学soapUI的使用,记录下以免忘记 1.创 ...

  7. windows下检验caffe是否配置正确

    windows下检验caffe是否配置正确:(注:不考虑搭建caffe的编译环境,而是直接使用caffe官网提供的二进制文件) windows版本源码以及二进制库文件下载地址:https://gith ...

  8. 用python模拟TCP3次握手连接及发送数据

    源码如下: from scapy.all import * import logging logging.getLogger('scapy.runtime').setLevel(logging.ERR ...

  9. 模式识别之ocr项目---（模板匹配&BP神经网络训练）

    摘 要 在MATLAB环境下利用USB摄像头采集字符图像,读取一帧保存为图像,然后对读取保存的字符图像,灰度化,二值化,在此基础上做倾斜矫正,对矫正的图像进行滤波平滑处理,然后对字符区域进行提取分割出 ...

  10. VC ++6.0英文版常用菜单使用参考【转载整理】

    (1)File菜单 New:打开“new”对话框,以便创建新的文件.工程或工作区. Close Workspace:关闭与工作区相关的所有窗口. Exit:退出VC6环境,将提示保存窗口内容等. (2 ...