ActionLink图像悬停按钮效果与鼠标事件

ActionLink image hover button effect with mouse event

本文关键字：鼠标 事件 图像 悬停 按钮 ActionLink      更新时间：2023-09-26

我想使用jQuery创建按钮效果，即mouse_over, mouse_leave和mouse_click。我使用visual studio 2012在mvc 4中的ActionLink中编写了链接。所以我想把图片改大一点当鼠标离开时，它会回到原来的图片当链接是click。

@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).;});

你可以在你的hover回调中使用.addClass和.removeClass函数

你可以使用CSS:hover伪类和一个精灵图像，并使用CSS将精灵图像移动到背景中。查看本文

相关文章：