Action psuedo-class hover does not rotate div as programmed

Question

Despite doing this before in many other projects, it seems that I ran out of luck. I wanted the logo to slightly rotate once you hover on the menu button. So, by using this snippet of code:

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

I expected it to do just that. But it didn't rotate the icon. As a test, I used this code:

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

and it worked. I decided to look into an answer in stack overflow that mentioned using sibling combinators here. I put +, ~, and > with no success. I'm beginning to think this a structural issue in my HTML code, but I'm still not quite sure yet. Can any of you help me out?

/* 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>

Ignore the js function error, i haven't programmed it's function yet. — DotMatrixProgrammer, Aug 16 '21 at 01:18

score 0 · Answer 1 · answered Aug 16 '21 at 01:20

0

.menu:hover .logoimage means when elements of the menu class are hovered, descendants of the matched elements with the logoimage class shall be rotated.

In your markup, there are no elements with the logoimage class under elements of the menu class.

answered Aug 16 '21 at 01:20

Rafael

7,605
13
31
46

Should I change it to `.logo` , the parent of `.logoimage` ? – DotMatrixProgrammer Aug 16 '21 at 01:22
For your CSS to work, you'll need to move the img element somewhere under the button. – Rafael Aug 16 '21 at 01:27
Then perhaps a way I can format the img under the button element while the img is still in the same place? – DotMatrixProgrammer Aug 16 '21 at 01:30
Spectric and I provided insight as to why your code isn't working. It's up to you to figure out how you want to adjust your code/presentation. – Rafael Aug 16 '21 at 01:34
I appreciate the help, I'll see what I can do. Perhaps more answers can clear things up a bit. – DotMatrixProgrammer Aug 16 '21 at 01:38

score 0 · Answer 2 · answered Aug 16 '21 at 01:23

There are no elements with the logoimage class that are children of elements with the menu class.

Instead, use the .logo .logoimage selector:

/* 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>

this however does not rotate the logo if the cursor is hovering on the menu button. — DotMatrixProgrammer, Aug 16 '21 at 01:25
I fixed it using JQuery, your answer wasn't quite specific enough... but I got the gist. — DotMatrixProgrammer, Aug 16 '21 at 14:04

Action psuedo-class hover does not rotate div as programmed

2 Answers2