我有一个三级层次结构的超级鱼垂直菜单。
Level-1 Level-2 Level-3
Fruit Apples Green
链接文字颜色在白色背景上是红色的。当我将鼠标悬停到第三级项目(绿色)并且菜单展开时,我希望活动路径(顶部,中间和底部选定的路径级别)在红色背景上反转为白色文本。使用a:hover可以轻松翻转所选链接(绿色),并且以某种方式在Apple和Fruit中翻转背景,但文本仍然是红色且不再可读。如何选择水果和苹果来控制文字颜色?
其他资料: 这是superfish的drupal实现,但我认为不重要。 css由
定义a {color:red; background-color:white;}
并且悬停条件在以下
中解决.sf-menu li:active, /* no effect from this line*/
.sf-menu li:hover,
.sf-menu li:focus,/* no effect from this line*/
.sf-menu li.sfHover,
.sf-menu li:active a,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
background: red; /*Hover background */
color: white;
}
Superfly还注入了其他类和设置,可以修改边距,但填充和位置设置适用于各种条件,但没有寻址颜色。我可以说,superfly菜单使用js来显示隐藏的菜单部分,当用户将鼠标悬停在某个项目上时。但是当我将鼠标悬停在苹果或绿色上时,我无法确定如何保持水果背景红色,但不能改变文字颜色。
这是菜单显示的实际html级联
<ul id="superfish-3" class="menu sf-menu sf-menu-materials sf-vertical sf-style-MatMenu2 sf-total-items-23 sf-parent-items-22 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow">
<li id="menu-899-3" class="first odd sf-item-1 sf-depth-1 sf-no-children">
<li id="menu-900-3" class="middle even sf-item-2 sf-depth-1 sf-total-children-8 sf-parent-children-0 sf-single-children-8 menuparent">
<a class="sf-depth-1 menuparent sf-with-ul" title="FRUIT" href="/specs/03">
FRUIT
<span class="sf-sub-indicator"> »</span>
</a>
<ul style="display: none; visibility: hidden; float: none; width: 12em;">
<li id="menu-901-3" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " title="**APPLE**" href="/specs/031000" style="float: none; width: auto;">APPLE</a>
</li>
正如您所看到的,定义了许多类。就像我说的那样,我很困惑为什么悬停背景颜色仍然适用于父级,但文本颜色会返回到不悬停的显示。我只是想找到一个可以选择悬停项的父级并保持文本处于悬停状态(白色)的类。
答案 0 :(得分:2)
您是否有指向您网站的链接?
开箱即用的猜测:
/* 3rd level links, no hover */
.sf-menu li li li a, .sf-menu li.sfHover li li a {
color: white;
}
/* 3rd level links, hover */
.sf-menu li li li a:hover, .sf-menu li.sfHover li li a:hover {
color: white;
background-color: red;
}
为此找出样式可能很棘手,但我发现使用它可以提供帮助。它以丑陋的颜色设置菜单,但是您可以很好地掌握CSS。让我知道你是怎么做的:
编辑:这适用于水平菜单:
/*** COLOR SKIN ***/
/* main ul element */
.sf-menu {
border-right: 1px solid FUCHSIA;
float:left;
}
/* general link styles*/
.sf-menu a {
display: block;
padding:9px 13px;
text-decoration:none;
border-top: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
}
/*** 1st Level ***/
/* 1st level links, no hover, no visits */
.sf-menu li a {
color: yellow;
background-color: green;
border-color: red;
}
/* 1st level links, while hovering over sub menu */
.sf-menu li.sfHover a{
color: black;
background-color: silver;
}
/* 1st level links, hover */
.sf-menu li a:hover {
color: white;
background-color: lime;
}
/* 1st level current page */
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color: white;
background-color: TEAL;
}
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {
text-indent:-9999px;
line-height: 0;
border-color:YELLOW transparent transparent;
border-style:solid;
border-width:4px; /*controls size of triangle */
display:inline-block;
margin-left:5px;
}
/*** 2nd level ***/
/* sub menu */
.sf-menu ul {
border-right:1px solid;
border-bottom:1px solid;
border-color: yellow;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:32px; /* overriding essential styles- adjust if you have gaps between first level and drop-down sub menu*/
}
.sf-menu ul ul {
margin-top:0; /*unlikely to need adjusting */
}
/* 2nd level links, no hover */
.sf-menu li li a, .sf-menu li.sfHover li a {
color: orange;
background-color: blue;
border-color: green;
border-bottom: 0;
}
/* 2nd level links, while hovering over sub menu */
.sf-menu li li.sfHover a{
color: black;
background-color: silver;
}
/* 2nd level links, hover */
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
color: white;
background-color: aqua;
}
/* 2nd level current page */
.sf-menu li li.current_page_item a,
.sf-menu li li.current_page_ancestor a,
.sf-menu li li.current_page_parent a {
background-color: TEAL;
}
/* 2nd level side triangles with pure CSS */
.sf-menu li li .sf-sub-indicator { /*right arrow*/
border-color: transparent transparent transparent WHITE;
}
/*** 3rd Level and beyond ***/
/* 3rd level links, no hover */
.sf-menu li li li a, .sf-menu li.sfHover li li a {
color: blue;
background-color: red;
border-color: blue;
}
/* 3rd level links, hover */
.sf-menu li li li a:hover, .sf-menu li.sfHover li li a:hover {
color: white;
background-color: pink;
}
/* 2nd level current page */
.sf-menu li li li.current_page_item a,
.sf-menu li li li.current_page_ancestor a,
.sf-menu li li li.current_page_parent a {
background-color: TEAL;
}