鼠标移入操作兄弟元素

最新推荐文章于 2022-06-16 15:15:33 发布
最新推荐文章于 2022-06-16 15:15:33 发布
阅读量542 收藏 2
点赞数 1
文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45243726/article/details/120418118
版权

定义两个盒子，class =“in”，class=“out”，当我鼠标移入in 时操作显示out

.in:hover + .out{  //这个是必须要相邻的兄弟元素

            display: block;

        }

还有一个

.in:hover ~.out{  //这个是选中in下面的兄弟元素，可以不相邻，但只选择第一个类名字为out的

            display: block;

        }

一个小案例（可以看下效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max{
            width: 300px;
            height: 260px;
            background-color: pink;
            position: relative;

        }
        .in{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: rebeccapurple;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .out{
            width: 290px;
            height: 250px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            opacity: 0.3;

        }
        .in:hover + .out{
            display: block;
        }

    </style>
</head>
<body>
    <div class="max">
        <div class="in"></div>
        <div class="out"></div>
    </div>
</body>
</html>

时光伊始
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标移入移出事件模块
08-21
鼠标移入移出事件模块系统结构:删除鼠标移入移出事件,删除所有鼠标移入移出事件,添加鼠标移入移出事件,消息钩子回调,鼠标移入移出事件,执行子程序_,取鼠标所在窗口句柄_,CallWind
鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
qq_44421796的博客
06-16 1514
需求：当鼠标移动到一个元素A身上时，另外一个元素B显示。 实现原理： A元素与B元素有一个相同的父级。 B元素默认隐藏，A元素默认显示。 当鼠标移动到A元素身上时，也可以看做是移动到了A元素的父级身上。A元素的父级获得一个鼠标的hover状态。 css使用： .father:hover .b { display:block } 的方式，来定义鼠标移动到父级身上时，B元素的样式。 html的示例代码： <div class="father"> <div class="brother-
css相邻兄弟选择器
Antg的博客
04-16 438
对于两个相邻的元素，可以使用+获取一个元素的后一个兄弟元素 例如： .box1:hover + .box2 demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>css相邻兄弟选择器</title> <style> .box1, .box2 { margin
用纯css中hover来显示和隐藏其他元素，如子元素，兄弟元素等（不用js，jq做展示或隐藏）...
webpon
08-16 1257
利用CSS控制元素的显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
hover控制同级元素css样式
guanguan0_0的博客
12-09 4437
css中我们经常遇到hover态的样式处理，通常我们用的更多的是控制自身或者控制子元素，但是遇到同层级元素怎么处理呢？ 直接上一个很经典的例子，也是在项目中遇到的： 例子是一个图片预览控件，需求：当鼠标移动到可视区域内时显示左右切换按钮和下方的操作区，但是当用户左右切换图片时，我们发现如果按钮操作区一直处于显示状态会遮盖部分图片信息，严重影响用户体验。所以，当鼠标移动到左右切换按钮时，我们需要将按钮操作区隐藏 1、如果a是b的父元素，使用 #a:hover #b{ } 2、如果a和b是同级元素，
通过CSS3的hover一个元素使其兄弟元素也相应改变某种属性
ChoiceK的博客
09-04 1万+
在最近的一个Bootstrap项目中用到了CSS3里面的hover，实现鼠标进入一个字体图标时，该字体图标向上移动一定距离，颜色也变为红色，同时其兄弟元素只改变颜色而不与其上移。 过程如下图 鼠标未进入之前 鼠标进入之后 //字体图标 Full time Support//文字 用一个盒子trred将两者包住 #server .
兄弟级别的hover控制 hover显示兄弟标签元素
qq_41932272的博客
06-16 1682
控制兄弟标签 源代码 当鼠标达到a标签的时候，div的cart-menu标签进行显示 加代码
jQuery鼠标移入抖动变形特效
06-24
jQuery鼠标移入抖动变形特效是一款基于HTML5 canvas来制作，可以在鼠标移入和移出HTML元素时，为其边框制作波浪状的抖动效果。
jquery 鼠标移入显示悬浮框
09-10
jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框
利用JS判断鼠标移入元素的方向
10-20
本文对JS判断鼠标移入元素的方向的实现方法进行介绍，并分享了完整的示例代码，有需要的朋友可以看下
鼠标移入滚轮控制元素大小
最新发布
08-16
在画布中使用鼠标移入某个元素之后滚轮控制元素大小功能
CSS: hover选择器的使用（实现鼠标悬浮效果，鼠标移上去div显示）
热门推荐
wujingj的博客
05-21 4万+
有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量用css解决，这样可以提高性能用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色a:hover { background-color:yellow; }用法2:使用a 控制其他块的样式：使用a控制a的子元...
鼠标进过 如何让同级的元素显示出来
xieting153的博客
09-10 1015
代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试&lt;/title&gt; &lt;style&gt; #mysteve {width:200px;
用纯css中hover来显示和隐藏其他元素，如子元素，兄弟元素等（不用js，jq做展示或隐藏）
id_ip的博客
06-22 3601
用纯css显示和隐藏其他元素，别的不说，上代码做笔记 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
css 实现鼠标移入移出显示隐藏元素
chuiji4810的博客
06-17 4597
<!DOCTYPEhtml> <html> <head> <style> tr.delete{ opacity:0; } tr:hover.delete{ opacity:1; } a </style> </...
CSS实现某元素hover时 所有兄弟节点样式改变
weixin_33757609的博客
03-02 7538
2019独角兽企业重金招聘Python工程师标准>>> ...
关于鼠标滑过隐藏的元素不显示的问题
caimaomaocai的博客
09-19 647
哎呀呀，踩了一个坑。 1.鼠标滑过某个元素的时候。让另外一个隐藏的元素显示 比如下面的代码   &lt;div class="box"&gt; &lt;div class="nav"&gt;全部分类 &lt;/div&gt; &lt;div class="list_wrap"&gt; &lt;ul&gt; &lt;li&amp
鼠标移入后元素块会移动问题
07-13
您好！对于鼠标移入后元素块移动的问题，您可以通过以下几种方法来实现： 1. 使用CSS的:hover伪类：您可以在CSS中为元素添加:hover伪类，然后设置元素的位置属性，使其在鼠标悬停时发生变化。例如： ```css .element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .element:hover { transform: translate(-50%, -50%) scale(1.2); } ``` 在上述代码中，.element代表您要操作的元素，通过设置transform属性来控制元素的位置和缩放效果。当鼠标悬停在元素上时，使用:hover伪类来修改元素的transform属性，实现元素的移动效果。 2. 使用JavaScript事件监听：您也可以使用JavaScript来监听鼠标移入事件，并在事件触发时修改元素的位置属性。以下是一个简单的示例： ```html <div id="element" onmouseover="moveElement(event)"> 移入后元素块会移动 </div> <script> function moveElement(event) { var element = event.target; element.style.transform = "translateX(-50%)"; } </script> ``` 在上述代码中，通过给元素添加onmouseover事件监听，并传入event参数来获取事件对象。然后，使用event.target来获取当前触发事件的元素，并通过修改元素的style.transform属性来实现元素的移动效果。 这些是实现鼠标移入后元素块移动效果的简单方法，您可以根据具体需求选择合适的方法来实现。希望对您有所帮助！如果您有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值