What is the best way to create a hover effect exclusively for the hamburger icon, and not for the close button

I am facing an issue with the code snippet below:

.btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
.btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}

Is there a way to make this hover effect only apply to the hamburger button, and not the close button?

$('.btn-menu').on('click', function() {
  $('body').toggleClass('menu-open');
});
.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-left: 0;
  padding-right: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars {
  position: relative;
  width: 40px;
  height: 2px;
}
.btn-menu__bars:before, .btn-menu__bars:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars:before {
  transform: translate(0, -5px);
}
.btn-menu__bars:after {
  transform: translate(0, 5px);
}
.menu-open .btn-menu .btn-menu__bars:before {
  transform: rotate(45deg);
}
.menu-open .btn-menu .btn-menu__bars:after {
  transform: rotate(-45deg);
}

/* How can I limit this effect to only the burger button? */
.btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
.btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-menu" type="button" style="background-color: red;">
  <i class="btn-menu__bars" aria-hidden="true"></i>
</button>

htmlcss

Answer №1

To achieve the hover effect, you can add the class .menu-open to the body and apply the hover effect when the body does not have this class using :not.

body:not(.menu-open) .btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
body:not(.menu-open) .btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}


$('.btn-menu').on('click', function() {
  $('body').toggleClass('menu-open');
});
.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-left: 0;
  padding-right: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars {
  position: relative;
  width: 40px;
  height: 2px;
}
.btn-menu__bars:before, .btn-menu__bars:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars:before {
  transform: translate(0, -5px);
}
.btn-menu__bars:after {
  transform: translate(0, 5px);
}
.menu-open .btn-menu .btn-menu__bars:before {
  transform: rotate(45deg);
}
.menu-open .btn-menu .btn-menu__bars:after {
  transform: rotate(-45deg);
}

body:not(.menu-open) .btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
body:not(.menu-open) .btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-menu" type="button" style="background-color: red;">
  <i class="btn-menu__bars" aria-hidden="true"></i>
</button>

You can also achieve the same functionality without JQuery:

document.querySelector(".btn-menu").addEventListener("click", () => {
  document.querySelector("body").classList.toggle("menu-open")
})


document.querySelector(".btn-menu").addEventListener("click", () => {
  document.querySelector("body").classList.toggle("menu-open")
})
.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-left: 0;
  padding-right: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars {
  position: relative;
  width: 40px;
  height: 2px;
}
.btn-menu__bars:before, .btn-menu__bars:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars:before {
  transform: translate(0, -5px);
}
.btn-menu__bars:after {
  transform: translate(0, 5px);
}
.menu-open .btn-menu .btn-menu__bars:before {
  transform: rotate(45deg);
}
.menu-open .btn-menu .btn-menu__bars:after {
  transform: rotate(-45deg);
}

body:not(.menu-open) .btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
body:not(.menu-open) .btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}
<button class="btn-menu" type="button" style="background-color: red;">
  <i class="btn-menu__bars" aria-hidden="true"></i>
</button>

If you only have one element with a class, consider using an id instead (and then use getElementById()).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving a base64 encoded image from a MySQL database using PHP

Within my MySQL database, there is a longblob field that stores a binary value representing an image uploaded through my website. I am currently attempting to retrieve the image using: <?php while($record = mysqli_fetch_assoc($result)): ?> <div&g ...

phphtmlmysql

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

cssangular

Placing a gradient background in front of two divs

I have created two divs with gradients: .container_middle_page{ margin: auto; height: 100%; display: flex; flex-direction: column; } .container_middle_page_up{ background-image: linear-gradient(to top, #F28118,white); height: ...

htmlcssbackgroundgradient

Guide on incorporating the WHERE clause into an insert statement in PHP version 5.1.6

What is the correct way to incorporate a where clause into an insert statement in PHP 5.1.6? In my code, I have declared a global variable $module and I am trying to use a where clause to refine my search results. Specifically, I want to include where mod ...

phphtmlmysql

Having trouble getting the same styles to show up on .class::before and .class::after elements, even though I've applied them. The changes aren't reflecting on the live server

Currently, I am working on a project that involves an ordered list (ol), and I am trying to add pseudo elements (::before,::after) to enhance its appearance. Strangely, when I write ::before and ::after separately, the styles are applied and visible on the ...

htmlcss

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

htmlcsssafari

Steps for transforming div content into an image

My goal is to save an image into my local storage for future use. Currently, I have a div with some content inside. I have attempted to use canvas2Image methods without success. Here is my code: $(document).ready(function () { alert("hello"); va ...

jqueryhtml

Canvas in the off state has been removed

My goal is to create a basic JavaScript library that includes rotating, translating, and scaling the canvas. One issue I am facing is when I rotate the canvas, half of the content ends up getting deleted because the center of rotation is set at (0, 0). I ...

javascripthtmlcanvas

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

htmlcssbootstrap-4internet-explorer-11

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

javascripthtmlcss

Rearrange the entire div container by simply dragging and dropping it. (Shift the Pop-up Modal dialog box)

How can I make a Modal pop-up draggable and change the color of the "Ok" and "Cancel" buttons on hover using a single CSS class? .hidModal{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; ...

javascriptjqueryhtmlcssdrag-and-drop

Obtain all text within a <div> element by utilizing the agility html package

When attempting to retrieve all <p> tags from within a <div> using the Agility HTML package, I encountered an issue where only the first <p> tag was obtained. <div id='bodayDiv'> <p> hi </p> <p> what is ...

htmlhtml-agility-pack

Displaying selected list item while concealing the original

I have a dropdown menu with several options. What I am looking for is to have it so that when we click on the drop down, a list of choices appears. Then, when we select an option from the dropdown, the original selection should be replaced with the one th ...

javascriptjqueryhtmlcss

Ignore the initial children of the highest level divs exclusively

Is there a way to apply a style to all top-level divs within a div, excluding the first one? I have tried using not(:first-child) but it seems to be recursive. How can this be achieved? <div class='want-to-skip-first-a'> <div class= ...

htmlcss

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

What is the reason behind the changes in the CSS rendering behavior of Fieldset legends over the past few months?

A form on my website contains nested <fieldset> elements, each with a unique <legend>. Recently, I discovered an issue with the page rendering on various browsers (Chrome, Firefox, Opera) that was not present before. One element, <span clas ...

htmlcssfieldset

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

javascripthtmlcssgoogle-apps-script

Is there a way to deactivate a clickable div immediately after it has been clicked on?

I have been searching for a solution to this particular question on different platforms, including Stack Overflow. However, I am looking for an answer using pure JavaScript only, so please avoid jQuery solutions. In order to provide context, I have includ ...

javascripthtmlcss

Alter the color of the span text without affecting the :before or :after elements

Can you change the text color of a span without affecting its :before and :after colors? Is it possible to modify the color of the main text in a span element without altering the colors of the elements that come before and after it? Here is an example o ...

htmlcsssass

Using a percentage in CSS translate can result in an image appearing blurry

I am facing a frustrating issue. Whenever I align an image using percentage-based transform translate, it results in a slight blur. This problem is specifically related to percentage alignment. Here is the CSS snippet: img { display: block; height: ...

htmlcsssass