动作伪类悬停不按程序旋转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>

.menu:hover .logoimage表示当菜单类的元素悬停时，与logoimage类匹配的元素的后代将被旋转。

在您的标记中，菜单类的元素下没有带有logoimage类的元素。

没有logoimage类的元素是menu类元素的子元素。

使用.logo .logoimage选择器:

/* 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%;
}
.logo .logoimage:hover {
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>

相关内容

最新更新

热门标签：