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

Question

我想使用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).;});

Answer 1

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

Answer 2

您可以通过将CSS与：hover伪类和一个sprite图像一起使用，以及仅通过css在后台将sprite图像移动来实现此目的。 看这篇文章