html - 动作伪类悬停不按程序旋转 div

问题描述

尽管以前在许多其他项目中都这样做过，但我似乎运气不佳。一旦您将鼠标悬停在菜单按钮上，我希望徽标稍微旋转。因此，通过使用这段代码：

.menu:hover .logoimage {
    transform: rotate(17deg);
    }

我希望它能做到这一点。但它没有旋转图标。作为测试，我使用了以下代码：

.logoimage:hover {
    transform: rotate(17deg);
    }

它奏效了。我决定查看堆栈溢出中提到的使用兄弟组合器的答案。我放了 +、~ 和 >，但没有成功。我开始认为这是我的 HTML 代码中的结构性问题，但我仍然不太确定。你们有谁能帮帮我吗？

/* Stylesheet for dotmatrixmoe.com 
    -------------------------------
      Programmed by Javier Moe */

/*  --------------
        Fonts
    --------------
*/

@font-face {
    font-family: game-over;
    src: url(resources/fonts/game-over.regular.ttf);
    }

/*  ---------------
        Classes
    ---------------- */

.weblogo {
    display: flex;
    align-items:center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    }

.logo {
    display: flex;
    align-items:center;
    width: 20%;
    font-size: 2.7vw;
    font-family: game-over;
    }

.logoimage {
    width: 3.2vw;
    margin: 0px 12px 0px 8px;
    transition: transform 0.2s ease-out;
    }

.headerwrapper {
    width: 100%;
    height: 3.5vh;
    background-color: #b1c5d4;
    padding: 3.5em 0px 4.5em 0px;
    overflow: hidden;
    }

.menubuttonbar {
    width: 3.5em;
    height: 0.54em;
    background-color: #686573;
    margin: 6px 0;
    }

.menu {
    display: inline-block;
    margin: 0px 1.5em 0px 1.2em;
    border: none;
    outline: none;
    background: none;
    }

/*  ----------------
     Mobile Classes
    ---------------- */

@media only screen and (max-width: 600px) {
    
    .brandingtext {
    font-size: 7.7vw;
    display: flex;
    font-family: game-over;
    justify-content: center;
    }
    
    .weblogo {
    }
    
    .logoimage {
    width: 7.7vw;
    }
}

/* ------------------
    Property Classes/
        Instructions
    ----------------- */

body {
    padding: 0px;
    margin: 0px;
    }

header {
    position: fixed;
    width: 100%;
    }

.menu:hover .logoimage {
    transform: rotate(17deg);
    }

<DOCTYPE html>
    <!-- Programmed entirely be me, Javier Moe.-->
    
    <!-- Website Metadata -->
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="resources/icons/head.png">
        <title>dotmatrixmoe</title>
    </head>
    
    <!-- HTML Document -->
    <body>
            <header>
                <div class="headerwrapper">
                    <div class="weblogo">
                        <div class="logo">
                            <img src="https://via.placeholder.com/30x30" class="logoimage">
                            text
                        </div>
                        <div id="menu">
                            <button onclick=togglemenu class="menu">
                                <div class="menubuttonbar">
                                </div>
                                <div class="menubuttonbar">
                                </div>
                                <div class="menubuttonbar">
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </header>
    </body>

标签： htmlcss

html - 动作伪类悬停不按程序旋转 div

问题描述

解决方案

推荐阅读