how to enable hover on an element outside the selected element?-CodePudding

I made this simple menu below, but I would like to make it more interactive for the user, inserting a hover when hovering both the icon when the menu is closed, and writing and the icon at the same time when the menu is open. I tried to apply the interaction with all the "primeiro" "segundo" classes... but it didn't work, does anyone have any idea of making this menu with a nice hover?

const openBtn = $('.open-btn');
const closeBtn = $('.close-btn');
const offcanvasMenu = $('.offcanvas-menu')

openBtn.on('click', function (e) {
    e.preventDefault();
    if (offcanvasMenu.hasClass('active')) {
        offcanvasMenu.removeClass('active');
    } else {
        offcanvasMenu.addClass('active');
    }
});

.header-area {
    background: #111;
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
}

a{
    text-decoration: none;
    color: #fff;
}

.logo a {
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    margin-left: 50px;
}


.icons {
    position: absolute;
    height: 100vh;
    width: 60px;
    background-color: #111;
    top: 0;
    left: 0;
    z-index: 9;
}

.icons a, .offcanvas-menu a{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offcanvas-menu a{
    padding: 0 1.5rem;
}

.offcanvas-menu {
    padding-top: 56px;
    position: fixed;
    top: 0;
    left: 0;
    background: #111;
    width: auto;
    height: 100vh;
    transform: translateX(-100%);
    transition: all .4s ease;
    z-index: 0;
}

.offcanvas-menu.active {
    transform: translateX(60px);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 20px;
    color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Off Canvas Menu</title>
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

</head>

<body>

    <!-- Header Area Start -->
    <header >

        <nav >
            <a  href="#">
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
            <a >
                <i ></i>
            </a>
        </nav>

        <nav >
            <a href="#" >Home</a>
            <a href="#" >About</a>
            <a href="#" >Services</a>
            <a href="#" >Price</a>
            <a href="#" >Blog</a>
            <a href="#" >Contact</a>
        </nav>
    </header>
    <!-- Header Area End -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

CodePudding user response：

Add this to your JavaScript

const mouseoverEvent = new Event('mouseenter');

$(".offcanvas-menu a, .icons a").hover(function (obj) {
    const classname = obj.target.classList[0];
    $("." classname).each((function (i,obj) {
      obj.classList.add("hover")
    }))
}, 
function (obj) {
  const classname = obj.target.classList[0];
    $("." classname).each((function (i,obj) {
      obj.classList.remove("hover")
    }))
});

And this to your .css with the desired hover color

a.hover{
    color: #f00;
}

CodePudding user response：

You can simply put this snippet in your JS and it should work.

$(".icons a, nav.main-menu a").hover(function () {
    offcanvasMenu.addClass('active');
}, 
function () {
    offcanvasMenu.removeClass('active');
});