can i target a :hover function in css after onclick javascript effect?
Question
So when i hover over the menu the background turns red and the text turns white. When i click on the dropdown link the second UL is being displayed. I wish to target the LI item.dropdown:hover as soon as i click on it. And set it to no hover.
is this done in css or javascript? I have been trying arround with both but cant seem to target the right li.
let menuBtn = document.querySelector(".menu-Btn"); let menu = document.querySelector(".mainMenu"); // Button toggle-menu menuBtn.onclick = ()=>{ if (menu.classList.contains("show")){ menu.classList.remove("show"); } else { menu.classList.add("show"); } } // Dropdown menu let toggle = document.querySelector(".dropdown"); let sub = document.querySelector(".submenu"); toggle.onclick = ()=>{ if (sub.classList.contains("show")){ sub.classList.remove("show"); } else { sub.classList.add("show"); } }
* { margin: 0; padding: 0; } body { background: #b3b3b3; justify-content: center; font-family: 'Open Sans', sans-serif; } header { margin: 0 0 20px 0; padding: 15px 0; width: 100%; height: auto; background: rgb(255, 255, 255); }.headerContainer, .container { width: 90%; margin-left: auto; margin-right: auto; padding: 15px; border: 1px solid #000; }.headerContainer { position: relative; display: flex; justify-content: space-between; align-items: center; }.headerBrand a { font-size: 30px; font-weight: 800; text-decoration: none; color: rgb(0, 0, 0); display: flex; align-items: center; }.headerBrand a img { padding: 0 10px 0 0; } header nav { top: 100%; left: 0; width: 100%; position: absolute; max-height: 70vh; overflow-y: auto; } header nav::-webkit-scrollbar {width: 10px;} header nav::-webkit-scrollbar-track {background: #f1f1f1;} header nav::-webkit-scrollbar-thumb {background: #888; } header nav::-webkit-scrollbar-thumb:hover {background: #555;} header nav.mainMenu { padding: 15px; display: none; list-style: none; background: #ffffff; border-radius: 5px; } header nav.mainMenu.show { display: block; } header nav ul li { padding: 5px 0; background:rgb(255, 255, 255); border-bottom:1px solid rgb(179, 179, 179); position: relative; justify-content: space-between; } header nav ul li:last-child { border: none; } header nav ul li a { display: block; font-size: 15px; font-weight: 700; width: calc(100% - 10px); text-transform: uppercase; color: red; text-decoration: none; padding: 0 0 0 15px; } header nav ul li.activepage { background: red; border-radius: 5px 5px 0 0; } header nav ul li.activepage a { color: white; } header nav ul li.dropdown ai { top: 10px; right: 10px; font-size: 10px; position: absolute; } header nav.mainMenu.submenu { display: none; padding: 0 0 0 15px; position: relative; border-radius: 0%; } header nav.mainMenu.submenu.show { display: block; } header nav.mainMenu li.submenu li { padding: 5px 0 5px 0; } header nav.mainMenu li.submenu li a { text-transform: none; font-weight: 400; }.menu-Btn { width: 35px; height: auto; text-align: center; background: red; font-size: 25px; border-radius: 5px; cursor: pointer; }.menu-Btn i { color: white; } header nav ul li:hover { background: red; border-radius: 5px; } header nav ul li:hover a { color: white; }
<head> <script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script> </head> <header> <div class="headerContainer"> <div class="headerBrand"> <a href="#">Logo</a> </div> <nav> <ul class="mainMenu"> <li class="activepage"><a href="#">Home</a></li> <li class="dropdown"> <a href="#">Dropdown<i class="fas fa-plus"></i></a> <ul class="submenu"> <li><a href="#">some link</a></li> <li><a href="#">some link</a></li> <li><a href="#">some link</a></li> </ul> </li> <li><a href="#">Another link</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="menu-Btn"><i class="fas fa-bars"></i></div> </div> </header> <!-- END header --> <div class="container"> <section> test </section> </div>
1 answers
solution1
0 ACCPTED 2021-01-17 00:12:33
Fixed it by adding a active class with javascript
let menuBtn = document.querySelector(".menu-Btn"); let menu = document.querySelector(".mainMenu"); // Button toggle-menu menuBtn.onclick = ()=>{ if (menu.classList.contains("show")){ menu.classList.remove("show"); } else { menu.classList.add("show"); } } // Dropdown menu let toggle = document.querySelector(".dropdown"); let sub = document.querySelector(".submenu"); toggle.onclick = ()=>{ if (sub.classList.contains("show")){ sub.classList.remove("show"); toggle.classList.remove("active"); } else { sub.classList.add("show"); toggle.classList.add("active"); } }
* { margin: 0; padding: 0; } body { background: #b3b3b3; justify-content: center; font-family: 'Open Sans', sans-serif; } header { margin: 0 0 20px 0; padding: 15px 0; width: 100%; height: auto; background: rgb(255, 255, 255); }.headerContainer, .container { width: 90%; margin-left: auto; margin-right: auto; padding: 15px; border: 1px solid #000; }.headerContainer { position: relative; display: flex; justify-content: space-between; align-items: center; }.headerBrand a { font-size: 30px; font-weight: 800; text-decoration: none; color: rgb(0, 0, 0); display: flex; align-items: center; }.headerBrand a img { padding: 0 10px 0 0; } header nav { top: 100%; left: 0; width: 100%; position: absolute; max-height: 70vh; overflow-y: auto; } header nav::-webkit-scrollbar {width: 10px;} header nav::-webkit-scrollbar-track {background: #f1f1f1;} header nav::-webkit-scrollbar-thumb {background: #888; } header nav::-webkit-scrollbar-thumb:hover {background: #555;} header nav.mainMenu { padding: 15px; display: none; list-style: none; background: #ffffff; border-radius: 5px; } header nav.mainMenu.show { display: block; } header nav ul li { padding: 5px 0; background:rgb(255, 255, 255); border-bottom:1px solid rgb(179, 179, 179); position: relative; justify-content: space-between; } header nav ul li:last-child { border: none; } header nav ul li a { display: block; font-size: 15px; font-weight: 700; width: calc(100% - 10px); text-transform: uppercase; color: red; text-decoration: none; padding: 0 0 0 15px; } header nav ul li.activepage { background: red; border-radius: 5px 5px 0 0; } header nav ul li.activepage a { color: white; } header nav ul li.dropdown ai { top: 10px; right: 10px; font-size: 10px; position: absolute; } header nav.mainMenu.submenu { display: none; padding: 0 0 0 15px; position: relative; border-radius: 0%; } header nav.mainMenu.submenu.show { display: block; } header nav.mainMenu li.submenu li { padding: 5px 0 5px 0; } header nav.mainMenu li.submenu li a { text-transform: none; font-weight: 400; }.menu-Btn { width: 35px; height: auto; text-align: center; background: red; font-size: 25px; border-radius: 5px; cursor: pointer; }.menu-Btn i { color: white; } header nav ul li:not(.active):hover { background: red; border-radius: 5px; } header nav ul li:not(.active):hover a { color: white; }
<head> <script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script> </head> <body> <!-- header --> <header> <div class="headerContainer"> <div class="headerBrand"> <a href="#">Logo</a> </div> <nav> <ul class="mainMenu"> <li class="activepage"><a href="#">Home</a></li> <li class="dropdown"> <a href="#">DROPDOWN<i class="fas fa-plus"></i></a> <ul class="submenu"> <li><a href="#">another link</a></li> <li><a href="#">another link</a></li> <li><a href="#">Manother link</a></li> </ul> </li> <li><a href="#">another link</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="menu-Btn"><i class="fas fa-bars"></i></div> </div> </header> <!-- END header --> <div class="container"> <section> test </section> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS/Javascript: After Hover effect
Can I disable a CSS :hover effect via JavaScript?
Continuous CSS effect onClick and hover
Change css:hover effect to jquery.onclick()
CSS hover effect does not work after running jquery function
:hover on css through onclick javascript
blur and unblur effect and hover effect css and javascript
JavaScript / CSS hover function
Can I use react or CSS to target a specific component to change onclick?
How can i trigger hover effect on element using pure javascript?
Related Tags