---代码

<!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. CreateJS结合Falsh工具生成Canvas动画（加密字符串的由来）

    CreateJS是一款制作Canvas动画的工具. 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是J ...

  2. mac os＋selenium2＋chrome驱动＋python3

    mac os 10.11.5 mac自带python2.7,自己下载了python3.5,pip list查看系统中的安装包,本人电脑中已经安装了pip和setuptools,若未安装,请先使用 su ...

  3. 简单过下bash/sh脚本基本知识吧

    1.sh/bash要注意空格的使用 2. for循环: for i in /etc/profile.d/*.sh ; do if [ -r "$i" ]; then if [ &q ...

  4. Unity Shaders and Effects Cookbook (3-4) 使用高光贴图

    在学习完上一节之后.已经了解了在Unity 中怎样实现一个高光 Shader ,可是会有一个问题.就是效果看起来不切实际,如以下的问题 我用一张图片贴到了Cube上面.然后用了一个高光材质,得到了下图 ...

  5. Pro Android学习笔记（一三七）：Home Screen Widgets（3）：配置Activity

    文章转载仅仅能用于非商业性质,且不能带有虚拟货币.积分.注冊等附加条件.转载须注明出处http://blog.csdn.net/flowingflying/以及作者@恺风Wei. 通过widget定义 ...

  6. VS2010/12多核编译

    在工作中,我们的一个完整的项目肯定是由多个个解决方案组成的,我们在调试的时候就会不断的去编译修改过的解决方案,如果当修改的解决方案多了以后我们编译的速度就在很大的程度上决定了我们的工作效率.这时候我们 ...

  7. ffmpeg H264 编解码配置

    ffmpeg H264编解码前面有文章介绍下,本文主要介绍一些参数配置. 编码: int InitEncoderCodec( int iWidth, int iHeight) { AVCodec * ...

  8. ffmpeg rtmp 推流错误WriteN, RTMP send error 10053 10038

    利用ffmepg推264流到rtmp服务端出现错误WriteN, RTMP send error 10053,具体如下图所示. 图1推流到rtmp服务错误 原因是视频流缺少SPS,PPS信息,加上这两 ...

  9. 实习日记）select option 选择不同的option时， 页面发生不同的变化

    怎么在下拉框的选择不同的option时, 页面发生响应的变化 因为option是没有点击事件什么的,  只有select才有, 所以不能通过option的点击事件来完成, 所以开始的尝试都失败了(之前 ...

  10. Openlayers中layer介绍

    1.base layers & overlay layers base layer:最底层的layer,其它的图层是在他之上,最先增加的图层默认作为base layer. overlay la ...