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

Question

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?

Thanks a lot in advance!

Avoid the use of `!important` in CSS code. Try explaining your problem better, please. — , Sep 02 '22 at 03:52
I think with only ```CSS``` codes no one could understand the problem exactly. For example which element gets the class of ```submenu-item```? Could you please post some ```HTML``` codes to better explain the problem? — hamid-davodi, Sep 02 '22 at 04:18
@fxtrot I've added the website link on the main post: https://unilingx.com/ It's a WordPress website! Please let me know if you can help me. Thanks a lot!! — axel-kabal, Sep 02 '22 at 05:13
@hamid-davodi I've added the website link on the main post: https://unilingx.com/ It's a WordPress website! Please let me know if you can help me. Thanks a lot!! — axel-kabal, Sep 02 '22 at 05:13
@axel-kabal maybe ```.submenu-item:hover a``` is the correct selector. substitute that instead of ```.submenu-item:hover + .menu-about``` in your CSS code and see that it works or not. — hamid-davodi, Sep 02 '22 at 12:26
@hamid-davodi Hey! That didn't do the trick. I'll explain again what I need: I have the .menu class (main menu items), and that class changes the font-size to 2em when on hover. What I need, is for that class (.menu) to mantain the "font-size:2em" also when hovering the submenu items (.submenu-item class). Let me know if I was clear enough! — axel-kabal, Sep 02 '22 at 14:37

score 0 · Answer 1 · answered Sep 02 '22 at 06:22

0

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.

answered Sep 02 '22 at 06:22

Tahmina Akter

96
1
5

Hey! Thanks for your answer but that didn't do the trick. I'll explain again what I need: I have the .menu class (main menu items), and that class changes the font-size to 2em when on hover. What I need, is for that class (.menu) to mantain the "font-size:2em" also when hovering the submenu items (.submenu-item class). Let me know if you have any idea of how can I do that. – axel-kabal Sep 02 '22 at 14:38

score 0 · Answer 2 · answered Sep 03 '22 at 03:42

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 class="nav-menu">
            <li class="menu-about menu-item">
                <div class="submenu-container">
                    <a id="aboutTag" href="#" class="menu-item-text">About
                    </a>
                </div>
                <ul id="mySubmenu" class="sub-menu">
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Mission</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Services</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">USP</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Pricing</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Clients</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Team</a>
                    </li>
                    <li class="submenu-item">
                        <a href="#" class="sub-menu-item">Partners</a>
                    </li>
                </ul>
            </li>

            <li class="menu menu-item">
                <a href="#" class="menu-item-text">Blog</a>
            </li>

            <li class="menu menu-item">
                <a href="#" class="menu-item-text">Hub</a>
            </li>

            <li class="menu menu-item">
                <a href="#" class="menu-item-text">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.

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

2 Answers2