html - 菜单动态改变颜色

Question

我的页面上有一个菜单，其中包含一组子菜单，这些子菜单将显示在 h-over 上。

我计划让菜单在每次悬停时动态更改颜色。

我喜欢添加一组颜色。

例如

#cccccc;

#999999;

#474747;

#4c4c4c;

当我悬停时，这些颜色必须动态更改我尝试像这样的一些 jquery：

$('menu').css('backgroundImage', 'url(something.gif)');

但我的计划是只用 CSS 来实现。有什么想法吗？

Answer 1

$('menu').css('backgroundImage', 'url(something.gif)');

尽管使用图像尝试使用

$('menu').css('background', '#cccccc');


$('menu:hover").css('background', '#999999', '#474747', '#4c4c4c');

Answer 2

你可以用这个

$('导航').css('背景','#cccccc');

$('navigation:hover").css('background','#999999','#474747',#4c4c4c

Answer 3

#idOmMenu{
    background-color:#474747;
}
#idOmMenu:hover{
    background-color:#cccccc;
}

这应该是一个“仅 css”的解决方案。

Answer 4

i=0;
function hover()
{
var color = new Array("cccccc","999999","474747","4c4c4c");
$('#IDofMenu').css('backgroundColor',color[i]);
i==3?i=0:i++;
}

Answer 5

您可以使用一些 javascript，假设您的菜单如下所示：

<ul class="nav">
  <li onmouseover="this.parentNode.className = 'hoveredpurple';" onmouseout="this.parentNode.className = '';"><span>item1</span>
  </li>
  <li onmouseover="this.parentNode.className = 'hoveredred';" onmouseout="this.parentNode.className = '';"><span>item2</span>
  </li>
</ul>

然后，如果您希望在 item1 或 item 2 悬停时更改整个菜单的颜色，您可以使用这样的一些 css：（这样您仍然可以从 css 文件中对其进行样式设置，而不必从 css 回到 javascript）

.hoveredred{
   background: red;
}
.hoveredpurple{
   background: purple;
}​

这是一个 jsFiddle：http: //jsfiddle.net/XCTcN/1/

在 css4 中，这可以在纯 css 中使用父选择器： http ://www.red-team-design.com/meet-the-css4-selectors

Answer 6

如果你愿意，你也可以加入一些 CSS3 的优点。

.menu {
    background: pink;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}

.menu:hover {
    background: yellow;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}
.menu:active {
    background: green;
    -webkit-transition: background 1s;
    -moz-transition   : background 1s;
    -o-transition     : background 1s;
    transition        : background 1s;
}