css 鼠标悬停在一个类上影响另一个类(WordPress)

5fjcxozz 于 2023-01-06 发布在 WordPress

关注(0)|答案(2)|浏览(112)

我有这个CSS在我的WordPress网站，将改变字体大小为2 em的主导航菜单项悬停时。我需要的是使它保持与该字体大小，而去子项。有没有办法实现这一点的WordPress内？

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

这就是我现在正在使用的代码，我添加了主菜单项。
我给了子项一个.submenu-item类，所以我研究的是使用类似这样的东西可以达到目的：

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

但是不行。我试过使用〉和~，但都不起作用。有办法吗？
提前感谢！

css

来源：https://stackoverflow.com/questions/73577246/make-hover-from-one-class-to-affect-another-wordpress

2条答案

按热度按时间

iqxoj9l91#

我已经检查了你的网站，希望这个CSS将为您工作。

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

如果!important没有被其他css覆盖，请确保不要添加它。

赞(0）回复(0）举报 2023-01-06

am46iovg2#

根据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。

赞(0）回复(0）举报 2023-01-06

我来回答

css 鼠标悬停在一个类上影响另一个类(WordPress)

2条答案

相关问题

热门标签

最新问答