动态更改颜色的菜单

Question

我在页面上有一个菜单，其中包含一组子菜单，将在鼠标悬停时显示。

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

我想添加一组颜色。

例如：

#cccccc;

#999999;

#474747;

#4c4c4c;

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

当我悬停时，这些颜色必须动态更改，我尝试了一些jQuery：

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

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

- Karthikeyan.A

---

你是想让每个悬停事件都更改为新的颜色，并循环显示这些颜色吗？ - zeel

Answer 1

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

不要使用图像，尝试使用...

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


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

- Vivek Dragon

Answer 2

你可以使用这个：

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

- SandhanaMurali

Answer 3

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

这应该是一种“仅使用CSS”的解决方案。

- Ivan Kuzev

Answer 4

你可以使用一些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或item2上时改变颜色，你可以使用以下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

- Maxim VA

Answer 5

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

- Man Programmer

---

有没有办法只用纯CSS来实现这个？ - Karthikeyan.A

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;
}

- Robert Hoffmann