Question

在我的要求中，我想要更改链接的背景图像，用于悬停，鼠标移出并在我的母版页中激活我尝试了几种方法，但它没有为我提供正确的解决方案。所以任何人都指导我解决方案和我的格式如下所示

    <a href='<%: Url.Action("ListTask", "Task") %>'>
<img id="taskImage" src='<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>' onmouseover="this.src='../Content/Images/MasterPage/TaskMenuHover.png'"
onmouseout="this.src='../Content/Images/MasterPage/TaskMenuNormal.png'"  /></a>

上面的代码可以正常工作，在这里我需要修复链接活动时的悬停图像，而不是在母版页中的活动视图（MVC）时更改。（此代码将在母版页。）。

任何人都可以在javascrip或jqery中提供解决方案。感谢。

Answer 1

你可以这样做：

$('#taskImage').hover(function(){
      $(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
}

$('#taskImage').mouseout(function(){
      $(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}

Answer 2

使用悬停功能。第一个参数用于鼠标悬停，第二个参数用于mouseout。

HTML

<a href="<%: Url.Action("ListTask", "Task") %>"><img id="taskImage" src="<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>" /></a>

的jQuery

$('#taskImage').hover(
    function() {
        $(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
    },
    function() {
        $(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
    }
);

就个人而言，我会修改你的标记，将图像包含在A标签中作为CSS的背景。那么你可以使用A：hover和A：active CSS状态来修改你的链接。这意味着不需要使用javascript。

在MVC主页中更改活动，悬停（mouseover）和mouseleave的链接图像

2 个答案: