带有鼠标事件的 ActionLink 图像悬停按钮效果答案

【问题标题】：ActionLink image hover button effect with mouse event带有鼠标事件的 ActionLink 图像悬停按钮效果
【发布时间】：2012-12-11 09:58:42
【问题描述】：

我想使用 jQuery 创建按钮效果，即 mouse_over、mouse_leave 和 mouse_click。我有使用 Visual Studio 2012 在 mvc 4 中的 ActionLink 中编写的链接。所以我想用稍大的图像更改图像，当鼠标离开时，它会返回原始图像并在单击链接时产生某种效果...

@Html.ActionLink(" ", "index1", "Home","index1", new {id="a1", @class="dashboard_function_icons"})

@Html.ActionLink(" ", "index2", "Home","index2", new {id="a2", @class = "dashboard_function_icons"})

@Html.ActionLink(" ", "index3", "Home","index3", new {id="a3", @class = "dashboard_function_icons"})

CSS CODE
---------
.dashboard_function_icons {

   display:block;
   height: 15px;
   width: 20px;
   padding-left: 80px;
   padding-bottom: 80px;
   margin-top:10px;
   margin-left:10px;
   float:left;
}

  #a1 {
    background: url("../Images/people.png") no-repeat;
  }

  #a2 {
    background: url("../Images/ball.png") no-repeat;
  }

  #a3 {
    background: url("../Images/save.png") no-repeat;
    }

 jQuery
 -------
 $(".dashboard_function_icons").hover(
        function () { $(this).},
        function () { $(this).;});

【问题讨论】：

标签： javascript asp.net-mvc jquery-ui css html.actionlink

【解决方案1】：

您可以在悬停回调中使用 .addClass 和 .removeClass 函数。

【讨论】：

有没有我可以效仿的例子，我正在努力掌握如何做到这一点......非常感谢提前！！！

【解决方案2】：

您可以通过使用带有 :hover 伪类和精灵图像的 CSS 来实现这一点，并且只需使用 css 在背景中移动精灵图像。见this article

【讨论】：