Make :hover from one class to affect another (WordPress)-CodePudding

I have this CSS on my WordPress website that will change the font-size to 2em of the main navigation menu items when hovering. What I need is to make it so that it remains with that font-size while going to the sub-items. Is there a way to achieve this inside of WordPress?

.menu a:hover {
font-size:2em !important;
transition-duration: all .2s !important;
}

That is the code I'm using right now, and I added the main menu items that .menu class.

I gave the sub-items a .submenu-item class. So what I researched is that using something like this could do the trick:

.submenu-item:hover   .menu-about {
font-size:2em !important;
transition-duration: 0.05s;
}

But it doesn't. I've tried using > and ~ and neither of those worked. Is there a way to do it?

This is the website that I'm currently working on: https://unilingx.com/

Thanks a lot in advance!

CodePudding user response：

I have checked your site and hope this CSS will work for you.

.hfe-nav-menu > li:hover > a {
font-size: 2em;
}

And make sure you do not add !important if it is not override with other css.

CodePudding user response：

According to this question it is not recommended or even possible to access the parent element with only CSS. You can do that with JavaScript as the codes below:

let mySubmenu = document.getElementById("mySubmenu");
let aboutTag = document.getElementById("aboutTag");

aboutTag.onmouseenter = function () {
    aboutTag.style.fontSize = "2em";
}

aboutTag.onmouseleave = function () {
    aboutTag.style.fontSize = "1.2em";
}

mySubmenu.onmouseenter = function () {
    aboutTag.style.fontSize = "2em";
}

mySubmenu.onmouseleave = function () {
    aboutTag.style.fontSize = "1.2em";
}

* , *::after, *::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 25px;
}

.menu-item {
    list-style: none;
    color: black;
    border: none;
}

.sub-menu {
    list-style: none;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.menu-about {
    position: relative;
}

.menu-about:hover .sub-menu {
    display: block;
}

.submenu-item {
    padding: 10px 5px;
    transition: all .5s;
}

.submenu-item:hover {
    background-color: wheat;
}

.menu-item-text {
    font-size: 1.2em;
    transition: all .2s;
}

.menu-item-text:hover {
    font-size: 2em;
}

<!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>hover effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">

<main>
    <nav>
        <ul >
            <li >
                <div >
                    <a id="aboutTag" href="#" >About
                    </a>
                </div>
                <ul id="mySubmenu" >
                    <li >
                        <a href="#" >Mission</a>
                    </li>
                    <li >
                        <a href="#" >Services</a>
                    </li>
                    <li >
                        <a href="#" >USP</a>
                    </li>
                    <li >
                        <a href="#" >Pricing</a>
                    </li>
                    <li >
                        <a href="#" >Clients</a>
                    </li>
                    <li >
                        <a href="#" >Team</a>
                    </li>
                    <li >
                        <a href="#" >Partners</a>
                    </li>
                </ul>
            </li>

            <li >
                <a href="#" >Blog</a>
            </li>

            <li >
                <a href="#" >Hub</a>
            </li>

            <li >
                <a href="#" >Career</a>
            </li>
        </ul>
    </nav>
</main>

<script src="myCode.js"></script>
</body>
</html>

I don't know how exactly you could add that codes to your WordPress codes (I'm not very professional in WordPress). But if you search, maybe found the way. Also for the last tip: it is not correct to say transition-duration: all .2s (that you mentioned in the question), the correct way is transition-duration: .2s or transition: all .2s.