wordpress 在纯CSS或JS(Jquery)中,更改父对象的样式,但仅在悬停一个特定子对象时更改

k3bvogb1  于 2023-08-03  发布在  WordPress
关注(0)|答案(2)|浏览(85)

我正在使用WordPress和Elementor构建一个大型菜单。
x1c 0d1x的数据
正如你可以看到所附的屏幕截图,我想改变标题边框左下角和右半径为0,当我悬停在我的菜单上的项目谁有子项目。
下面你会发现当前代码的简化建模(在我使用CMS时,每个元素之间有更多的div)。

<section class="header">
   <div class="logo">...</div>
   <div class="menu">...</div>
      <ul>
         <li class="menu-item">Item 1</li>
         <li class="menu-item">Item 2</li>
         <li class="menu-item">Item 3</li>
         <li class="menu-item has-children">Item 4</li>
            <ul>
                <li>
                    <div>Content of my submenu</div>
                </li>
            </ul>
      <ul>
   <div class="buttons">...</div>
</section>

字符串
我想要的是:当我悬停<li>与类“has-children”来改变父<section>与类“header”的样式时,为了修改他的边界半径左下和右下。
我很乐意任何想法来帮助我用纯CSS或一点JS来做。
提前感谢!

m1m5dgzv

m1m5dgzv1#

您希望使用:has()选择器,以便确定是否有一个孙元素处于悬停状态。添加了一些基本的CSS来了解基本的想法,你只需要section:has()

ul ul {
  display: none;
}

section.header {
  background-color: green;
  border-radius: 30px;
  padding: 30px;
}

ul>li.has-children:hover ul {
  display: block;
}

/* what you want to use */

section:has(li.has-children:hover) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

个字符

clj7thdc

clj7thdc2#

你需要做的是将下面的代码添加到你的CSS中

.has-children:hover section {apply any css here}

字符串
或者是

.has-children:hover .header {apply any css here}


有了这个代码,每当你悬停任何has-children时,header/section中的css就会变成你想要的任何东西。
举例来说:

.has-children:hover .header {background:red}


这将改变部分/标题的背景颜色为红色,当你悬停LI有孩子。
这就是你想要的吗这个问题有点难理解。但如果你想问我别的就在这里问我

相关问题