---代码

<!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. Maven出现User setting file does not exist ...\.m2\setting.xml的问题解决（同时也解决用户.m2目录下无setting.xml文件）

    如果Eclipse中出现User setting file does not exist ...\.m2\setting.xml这样的问题,解决方法如下: 1.拷贝%M2_HOME%/conf/set ...

  2. Maven插件maven-antrun-plugin的使用

    以下引用官方的介绍http://maven.apache.org/plugins/maven-antrun-plugin/: 一.什么是maven-antrun-plugin? 该插件提供从Maven ...

  3. JS中原型链中的prototype与_proto_的个人理解与详细总结（**************************************************************）

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  4. open-falcon的邮件报警

    mail-provider提供http邮件服务,和邮件服务器打通 falcon-sender 负责收集falcon的邮件,然后通过mail-provider发送出去 mail-provider 把sm ...

  5. Why is chkconfig no longer available in Ubuntu?

    Question: I can not use chkconfig tools in Ubuntu 12.10 It's a very useful tools to configure the se ...

  6. ActiveMQ测试工具

    1. 测试工具 目前使用两种测试工具进行压力测试 1. Jmeter 测试单客户端收发多主题,测试高并发,大数据量时的接收效率 2. emqtt_benchmark测试多客户端收发主题,测试高吞吐量下 ...

  7. eclipse代码注释模版

    设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...

  8. Android UI经常使用实例 怎样实现欢迎界面（Splash Screen）

    在Android平台下.下载一个应用后,首次打开映入眼帘的便是Splash Screen,暂且不说Android的设计原则提不提倡这样的Splash Screen.先来看看一般使用Splash Scr ...

  9. 互联网时代的精准招聘-Uber新手游有感

    找工作难.招人也难.漫天的简历,全是求职者广撒网式的复制粘贴,如何找到合适的人.会认真对待职位的人?或许你须要换换思路,看看Uber新出的手机游戏能够咱啥启发. Uber在过去5年已经蹭蹭成长为估值5 ...

  10. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...