Question

我希望使用div id对每个div有不同的悬停效果。可能吗？我一直在谷歌上搜索一段时间，我看到的只是使用类名和标签的悬停效果。我想用javascript或jquery来做这件事。感谢任何帮助，谢谢！

Answer 1

您可以从函数中评估id：

$(".hoverItems").hover( overState, outState );

function overState () {
  switch ( this.id ) {
    case "foo" :
      /* effect a */
      break;
    case "bar" :
      /* effect b */
  }
}

function outState () {
  switch ( this.id ) {
    case "foo" :
      /* undo effect a */
      break;
    case "bar" :
      /* undo effect b */
  }
}

演示：http://jsbin.com/evikog/edit#javascript,html

Answer 2

使用JQuery，您可以将动作绑定到mouseEvent： http://api.jquery.com/category/events/mouse-events/

你只需将事件绑定到你的div并做动画......

$("#foo,#bar").hover( overState, outState );

function overState () {
      /* effect */
}

function outState () {
      /* undo effect */
}

如果你想动画几个div，给他们一个类。例如“动画”：

HTML：

<div class="animated">blabla</div>

的Javascript

$(".animated").hover( overState, outState );

这样，动画类的所有div都会有动画。

Answer 3

您可以将css与class + id的组合用于特定样式

如何在javascript中使用DIV ID对DIV进行悬停效果？

3 个答案: