点击父元素子元素发生变化_css子组件有类父元素动态变化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25436999/article/details/85695863

今天学到css的动画animation 和过渡transition
动画没什么说的，
在使用过度这个属性时，发现：hover 必须要悬停在设置的div上才动，比如旋转，有时候就给你卡在那，不会让你的鼠标停在空白的地方。
所以应该是有悬停在父元素上而子元素动的功能的。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=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height:100px;
            background-color: aqua;
            /* transform: rotate(360deg); */
            transition: 
            width 4s,
            transform 4s;
        }
        /* #div:hover{
            width: 400px;
            transform: rotate(180deg);
        } */
        /* 点击父元素 子元素发生变化 */
        #div2:hover #div1{
            width: 400px;
            transform: rotate(180deg);
        }
        #div2{
            width: 800px;
            height: 500px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
        <!-- transition: property duration timing-function delay;   
        
        property：执行过渡的属性  
        duration：执行过渡的持续时间  
        timing-function：执行过渡的速率模式  
        delay：延时多久执行  



        link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

注：伪类的顺序应为link--visited--hover--focus--active。
         -->
         <div id="div2">
                <div id="div1">

                    </div>
         </div>
        
</body>
</html>

css这语法熟悉了也很有趣。
通过父元素能操作子元素，那应该通过同级的也能操作，但是发现一个问题
：hover 只能向下不能向上

<!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=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height:100px;
            background-color: aqua;
            /* transform: rotate(360deg); */
            transition: 
            width 4s,
            transform 4s;
        }
        /* #div:hover{
            width: 400px;
            transform: rotate(180deg);
        } */
        /* 点击父元素 子元素发生变化 */
        #div2:hover + #div1{
            width: 400px;
            transform: rotate(180deg);
        }
        #div2{
            width: 800px;
            height: 500px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
        <!-- transition: property duration timing-function delay;   
        
        property：执行过渡的属性  
        duration：执行过渡的持续时间  
        timing-function：执行过渡的速率模式  
        delay：延时多久执行  



        link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

注：伪类的顺序应为link--visited--hover--focus--active。
         -->
        
                
                <div id="div2">
                </div>
                <div id="div1">

                    </div>
        
</body>
</html>

我这个div1只能放在div2下面
参考：
https://blog.youkuaiyun.com/qq_42039281/article/details/81660531