Html 选中复选框并将鼠标悬停在另一个 div 上时自定义 div 样式

发布于07月13日

When I check a checkbox and hover on the catBody div, I want to close cat eye(reduce the height of the eyes of the cat)

#select1:checked + .catBody:hover .rightEye{
    width: 15%;
    height: 60%;
}

<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>Switch</title>
        <link rel="stylesheet" href="switchStyling.css">
    </head>
    
    <body>
    
    
        <article role="img">
    
            <div class="day"></div>
            <div class="moon"></div>
            <div class="whole">
    
                <!-- <div class="outerCircle"> -->
                <label class="button" for="select1">
                    <input id="select1" type="checkbox">
                    <span class="slider round"></span>
                    <div class="innerCircle">
                    </div>
                    <div class="sun"></div>
    
                    <div class="catBody"></div>
                    <div class="leftear"></div>
                    <div class="rightear"></div>
                    <div class="leftEye"></div>
                    <div class="rightEye"></div>
                    <div class="noise"></div>
                    <div class="neck"></div>
    
                </label>
            </div>
    
    
        </article>
    
    
    </body>
    
    </html>

我使用了"+"，它是一种很好的方式来表示我想要通过这样做和连接它们来达到div的方式吗？

仅使用css和html

.catBody { width: 200px; height: 200px; background: orange; } .rightEye { width: 100px; height: 100px; background: pink; } #select1:checked~.catBody:hover~.rightEye { transform: scaleY(60%); }

<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>Switch</title> <link rel="stylesheet" href="switchStyling.css"> </head> <body> <article role="img"> <div class="day"></div> <div class="moon"></div> <div class="whole">  <label class="button" for="select1"> <input id="select1" type="checkbox"> <span class="slider round"></span> <div class="innerCircle"> </div> <div class="sun"></div> <div class="catBody"></div> <div class="leftear"></div> <div class="rightear"></div> <div class="leftEye"></div> <div class="rightEye"></div> <div class="noise"></div> <div class="neck"></div> </label> </div> </article> </body> </html>

Html 选中复选框并将鼠标悬停在另一个 div 上时自定义 div 样式

推荐答案

Html相关问答推荐

将文本区域标签的内容着色为SON(带有 colored颜色 )

我需要主页按钮出现在中间

如何使用html和css关键帧创建动画

窗口视图之外的下拉菜单位置

HTMLTag属性内的svelte+TS类型声明

如何使用*ngFor将模板从父级传递到子级

如何解决水平塌陷问题？

多次使用组件时计数Angular 14中嵌套数组的指令

HTML，CSS-阻止按钮在单击时向上移动

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

页面文件夹内的 HTML 页面未加载主目录的 style.css

perl hdb 调试器：浏览器以错误的编码显示 UTF-8 源代码

如果使用复选框属性更改，如何防止事件更改？

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

如何将一个边框向下移动

pull-right 不适用于 bootstrap alert 内的按钮

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

使用 rgba() 的 css 中的边框不透明度不起作用

无法使用 Reactjs 多次更新本地存储