css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？-6ren

css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？

转载作者：太空宇宙更新时间：2023-11-03 18:13:34

25

4

我找到了这样的解决方案

li:hover >a 
{
background-color:#ad7272;
}

这是我的 CSS+HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
    * {
    margin:0px;
    padding:0px;
}

body {
    background-color:#CC3;
    font-family:Verdana;
    padding:50px;   /*all four paddings are 50px*/
}

h1 {
    text-align:center;
    border-bottom:2px solid #666;
}

ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
    list-style-type:none;
    font-size:15px;
}

ul#mainmenu li{
    float:left;
    position:relative;
    width:350px;
    text-align:center;
    margin-right:3px;   /*renders a right margin of 5 pixels around the list       items */
}

ul#mainmenu a {
    text-decoration:none;
    display:block;
    line-height:25px;   /*gives a vertical centering*/
    width:350px;    /*same as the width of the list items*/
    height:25px;
    background-color:#C0DCC0;
    border-radius:5px;
    outline:1px solid red;  /*takes up the space outside of the elements's container     (i.e. in this case the outside of the list items*/
}

ul#mainmenu .sub1 li {
    margin-top:2px;
}

ul#mainmenu .sub1 a {
    border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}

ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
    margin-left:20px;
}

ul#mainmenu li:hover > a {
    background-color:#ad7272;
}





</style>

<h1>Welcome</h1>
<ul id="mainmenu">
<li><a href="#">Home</a></li>

<li><a href="#">Products</a>
<ul class="sub1">
<li><a href="#">Clothing</a>
<ul class="sub2">
<li><a href="#">T-Shirts</a>
<ul class="sub3">
<li><a href="#">Polo</a></li>
<li><a href="#">V-Neck</a></li>
<li><a href="#">Henley</a></li>
</ul>
</li>
<li><a href="#">Shirts</a>
<ul class="sub4">
<li><a href="#">Half-Sleeve</a></li>
<li><a href="#">Full-Sleeve</a></li>
</ul>
</li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Trousers</a></li>
</ul>
</li>
<li><a href="#">Shoes</a>
<ul class="sub5">
<li><a href="#">Sports-Shoes</a></li>
<li><a href="#">Formal-Shoes</a></li> 
</ul>
</li>
<li><a href="#">Accessories</a></li>
</ul>
</li>

<li><a href="#">Contact Us</a></li>
</ul>

我看不懂这些步骤。它是如何工作的？在最后一个样式部分，我猜它使用的是直接子选择器。但是，为什么当我将鼠标悬停在它上面时，为什么每个子菜单列表项都在改变它的背景颜色？我无法理解这个概念。我想在 CSS 中实现它。请解释如何操作以及操作步骤。

最佳答案

这是您查询的解决方案。

CSS3

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 1px;}
ul#css3menu1 ul>li{
    margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
    float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
    text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
    border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
    padding:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
    border-style:none;}

HTML

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#" style="height:15px;line-height:15px;">Item 0</a></li>
    <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Item 1</span></a>
    <ul>
        <li class="subfirst"><a href="#">Item 1 0</a></li>
        <li><a href="#">Item 1 1</a></li>
        <li><a href="#">Item 1 2</a></li>
    </ul></li>
    <li class="toplast"><a href="#" style="height:15px;line-height:15px;">Item 2</a></li>
</ul>

你能试试这个吗

关于css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23212757/

25

4

0

文章推荐： python - 返回由字符串元素及其长度组成的对列表 - Python

文章推荐： html body extends after make element a negative position

javascript - jQuery 导航 - 更改输入的父-父-父-父-兄弟的输入
我目前正在寻找一些关于 jQuery 的建议，因为我认为我做错了，即使我得到了我想要的结果。我想在更改时将输入的值更改为最接近的具有 .milestone 类的输入的值。我想要更改的输入是保持输入，
javascript - 高级 javascript 继承失败 - 父 <- 父 <- 子
我已经阅读有关绑定(bind)、调用、申请的文章近一周了，对我来说仍然很复杂。我想我写的这个 jsfiddle 需要它们。然而，我没能做到，因为我仍然很困惑。我尽力写了一些我上周从遇到这个问题的开发
java - 父 POM/NOOP 父 POM 中的 "Child-only configuration"
我有一个项目生成代码。生成时间真的很长，所以我把它分成了多个项目，每个项目产生了整体的 20%。原始 POM 成为“父 POM”，子项依赖于它，仅包含一个单独的 Artifact ID 和一两个更改的
c# - asp.net mvc 父 subview ，父 View 更新 subview
我正在使用局部 View 来创建父 subview 。我最理想的是父 View 上的提交按钮，用于保存子值。我有以下模型。 public class Course { public int
rust - 父<->子关系所有权问题
我刚刚开始学习Rust，并且在理解所有权如何在我的案例中遇到一些麻烦: use std::ops::IndexMut; // =====================================
Javascript:父/子对象实例化的顺序
我是 JavaScript 新手，想了解更多有关它实例化父/子对象的顺序的信息。更具体地说，我想从编译器/浏览器的 Angular 理解以下代码片段。 var parent = { child:
Azure 父/子差异磁盘
我正在测试 Azure IaaS，并遇到了一个非常基本的问题。我有一个父 VHD 和子 VHD，已使用 csupload 将其作为页面 blob 上传，并且门户中显示图像和磁盘。然后我尝试将 pare
ios - 父/子托管对象上下文究竟是如何工作的？
我的应用程序会定期为我坚持使用的对象请求更新 Core Data到网络服务。然后我需要更新我在主要上下文中拥有的对象(默认情况下 AppDelegate 中提供的对象)。编辑对象的不是用户，所以我需要
jQuery 父
texT text text text text text 如何直接获取来自.menu ？里面的 child 不应该采取。
jquery 父、子的简写
我一直需要影响与其他元素相关的元素，但我的方法有点业余! 即到 // matched item where script is called from LINK 我使用； $(thi
MySQL - 父+子类别总数
我有两个表: 父子“类别”: id name parent_id 1 Food NULL 2 Pizza 1 3 Pasta
Python 父/子类方法调用
Linux 上的 Python 2.7.6。我正在使用从父级继承的测试类。父类保存了许多子类共有的许多字段，我需要调用父类的 setUp 方法来初始化这些字段。调用 ParentClass.setU
mySQL 父、子模型和默认值
我有一个处理图像、相册和相册类别的数据库。一个专辑可以有多个专辑(子专辑)，并且只有 1 级深度。一张专辑仅属于一个专辑类别。在这里做了一些研究，我相信最合适的数据库模型是这个 album_ca
python - 父/子数据库包含循环引用
我有一个关键字表，其中每个关键字都分配有一个 ID，并且是唯一的。我有第二个表，将父关键字的 ID 链接到子关键字的 ID。一个关键字最多可以有大约 800 个 child 或根本没有。 child
css - 父>子CSS选择器
我经常使用这个 CSS 选择器 parent>child。我的设计在 Mozilla 和 Opera 中看起来不错。但在 IE 中，它很糟糕。我知道 > 在 IE 中无法识别，但在 IE 中有什么替
c++ - 父/子类所有权语义
我一直在用一个父对象构建一个系统，它在其中创建各种子对象，每个子对象都需要一个主对象才能运行。现在，到目前为止，我一直在创建 shared_ptr和 Child* ，所以当 Parent 和所有 C
java - 父/子序列化本地类不兼容异常
我从以下两个类中收到序列化兼容性错误。只有父类CommericalCustomer 实现了序列化。当具有如下所示的父/子关系时，使用可序列化接口(interface)的正确方法是什么？ public
C 父/子退出变量
我正在开发一个程序并学习父/子进程。目前我的子进程是 exit(variable); 在我的 main() 中我有: signal(SIGCHLD, chldHandler); 在我的 main()
java - 父/子方法覆盖
考虑以下两个具体类: public class A { protected void foo() { System.out.println("A foo"); bar
c# - 父/子泛型关系
所以，我正在尝试建立这样的父/子类关系: class ParentClass where C : ChildClass { public void AddChild(C child)

首页

博学

6Ren·AI

商城

css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？