---代码

<!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. Oracle SOA Suit Adapter

    SOA架构的一个核心的使命是整合企业现存的各式各样的计算资源,它不仅仅是代码层面的整合,更是硬件,计算能力,服务能力的整合.Oracle SOA Suite在这方面做得特别的贴切,它提供了一组Adap ...

  2. GOF23种设计模式-工厂模式

    • 工厂模式: – 实现了创建者和调用者的分离. – 详细分类: • 简单工厂模式 • 工厂方法模式 • 抽象工厂模式 • 面向对象设计的基本原则: – OCP(开闭原则,Open-Closed Pr ...

  3. ubuntu 配置 django

    安装 安装Apache sudo apt-get install apache2 安装Django 下载Django 安装mod_wsgi sudo apt-get install libapache ...

  4. 拦截器及 Spring MVC 整合

    一.实验介绍 1.1 实验内容 本节课程主要利用 Spring MVC 框架实现拦截器以及 Spring MVC 框架的整合. 1.2 实验知识点 Spring MVC 框架 拦截器 1.3 实验环境 ...

  5. Git安装及SSH Key管理之Windows篇

    一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Git版本:Git-2.11.0-64-bit.exe(64位) 二.Git安装 去官网下载完后一路下一步完成安装,如下图:   ...

  6. eclipse中文凝视字体太小解决方法

    新安装的eclipse中文凝视字体太小.解决方法例如以下: 打开Elcipse-->点击菜单条上的"Windows"-->点击"Preferences&quo ...

  7. ubuntu 16.04 更新 gcc/g++ 4.9.2

    ubuntu 转载 2016年10月12日 :: 标签:ubuntu /g++ /gcc [html] view plain copy sudo dpkg -l g++ 最近在学C++primer , ...

  8. 啥是Restful?

    在Web设计与开发中,经常会看到Restful这个概念.对HTTP没有深入了解的我看到这个,基本一带而过. 其实既然只是概念,理解其中的意思就OK. Restful 1. 一种Web设计/架构方式 2 ...

  9. BZOJ 2818 Gcd 线性欧拉

    题意:链接 方法:线性欧拉 解析: 首先列一下表达式 gcd(x,y)=z(z是素数而且x,y<=n). 然后我们能够得到什么呢? gcd(x/z,y/z)=1; 最好还是令y>=x 则能 ...

  10. 调试LD_PRELOAD注入的代码

    LD_PRELOAD提供了平民化的注入方式固然方便,同一时候也有不便:注入库出错后调试比較困难. 我琢磨了几天找到了可行的调试方法,当然未必是最有效的办法.抛出陋文,希望引来美玉~ 首先.写一段代码作 ...