当前菜单项上的悬停状态

时间:2022-11-03 15:50:26

I ran into a little problem that seems to be a pain in the ass to fix. I have styled this wordpress menu http://bandmark.com and every menu item has its own background image. The problem I am having is that I cannot remove or overwrite the style that controls the ".current" background. On the home page they look fine but if you click a link to go to a page/category then the .current style kicks in and messes with the presentation. When you hover over the current menu item the graphic slides in at a weird angle and does not look very good.

我遇到了一个小问题,似乎是修复屁股的痛苦。我已经设置了这个wordpress菜单http://bandmark.com,每个菜单项都有自己的背景图片。我遇到的问题是我无法删除或覆盖控制“.current”背景的样式。在主页上,它们看起来很好,但如果您单击链接转到页面/类别,那么.current样式将在演示文稿中启动并混乱。当您将鼠标悬停在当前菜单项上时,图形会以奇怪的角度滑动,看起来不太好。

    nav#omc-main-navigation ul li.current-menu-item a

seems to be element that I need to override. If I change the background to none I get a blank screen. Anyway to get the .current state to be the same as :hover? Like I said above they all have their own menu-item-{number}. I apologize if this sounds a bit confusing.

似乎是我需要覆盖的元素。如果我将背景更改为无,则会出现空白屏幕。无论如何要使.current状态与以下相同:悬停?就像我上面说的那样,他们都有自己的菜单项 - {number}。如果这听起来有点令人困惑,我道歉。

2 个解决方案

#1


1  

Where you've defined the hover states, e.g.:

你定义悬停状态的地方,例如:

nav#omc-main-navigation ul li#menu-item-4200 a:hover { background: ... }

add the current menu item as follows:

添加当前菜单项,如下所示:

nav#omc-main-navigation ul li#menu-item-4200 a:hover,
nav#omc-main-navigation ul li#menu-item-4200.current-menu-item a { background: ... }

#2


2  

Can you just add .current to the :hover style? Example:

你可以在.hurrent风格中添加.current吗?例:

a:hover, a .current { background-color: #333; }

http://jsfiddle.net/e2vTN/

#1


1  

Where you've defined the hover states, e.g.:

你定义悬停状态的地方,例如:

nav#omc-main-navigation ul li#menu-item-4200 a:hover { background: ... }

add the current menu item as follows:

添加当前菜单项,如下所示:

nav#omc-main-navigation ul li#menu-item-4200 a:hover,
nav#omc-main-navigation ul li#menu-item-4200.current-menu-item a { background: ... }

#2


2  

Can you just add .current to the :hover style? Example:

你可以在.hurrent风格中添加.current吗?例:

a:hover, a .current { background-color: #333; }

http://jsfiddle.net/e2vTN/