使 :hover 从一个类影响另一个类 (WordPress)答案

【问题标题】：Make :hover from one class to affect another (WordPress)使 :hover 从一个类影响另一个类 (WordPress)
【发布时间】：2023-01-05 06:35:58
【问题描述】：

我的 WordPress 网站上有这个 CSS，它会在悬停时将主导航菜单项的字体大小更改为 2em。我需要做的是让它在转到子项目时保持该字体大小。有没有办法在 WordPress 中实现这一点？

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

那是我现在正在使用的代码，我添加了 .menu 类的主菜单项。

我给子项目一个 .submenu-item 类。所以我研究的是使用这样的东西可以达到目的：

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

但事实并非如此。我试过使用 > 和 ~ 但都没有用。有办法吗？

非常感谢！

【问题讨论】：

避免在 CSS 代码中使用 !important。请尝试更好地解释您的问题。
我认为只有 CSS 代码没有人能准确地理解这个问题。例如，哪个元素获得 submenu-item 类？您能否发布一些HTML代码以更好地解释问题？
@fxtrot 我在主帖上添加了网站链接：unilingx.com 这是一个 WordPress 网站！如果你能帮助我，请告诉我。非常感谢！！
@hamid-davodi 我在主帖上添加了网站链接：unilingx.com 这是一个 WordPress 网站！如果你能帮助我，请告诉我。非常感谢！！
@axel-kabal 也许.submenu-item:hover a 是正确的选择器。在您的 CSS 代码中用它代替 .submenu-item:hover + .menu-about，看看它是否有效。

标签： css wordpress hover elementor

【解决方案1】：

我检查了您的网站，希望此 CSS 对您有用。

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

并确保你不添加 !important 如果它没有被其他 css 覆盖。

【讨论】：

嘿！感谢您的回答，但这并没有奏效。我将再次解释我需要什么：我有 .menu 类（主菜单项），并且该类在悬停时将字体大小更改为 2em。我需要的是那个类（.menu）在悬停子菜单项（.submenu-item 类）时也能保持“font-size:2em”。如果您知道我该怎么做，请告诉我。

【解决方案2】：

根据this question，不推荐甚至不可能仅使用 CSS 访问父元素。你可以这样做JavaScript如以下代码：

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>

我不知道您如何准确地将这些代码添加到您的 WordPress 代码中（我在 WordPress 方面不是很专业）。但如果你搜索，也许找到了路。还有最后一个提示：说transition-duration: all .2s（你在问题中提到的）是不正确的，正确的方式是transition-duration: .2s或transition: all .2s。

【讨论】：