jQuery：鼠标悬停时更改图像按钮URL

如何解决jQuery：鼠标悬停时更改图像按钮URL

| 什么是jquery脚本来更改按钮鼠标悬停时的imageurl？

<asp:ImageButton ID=\"ImageButton1\" runat=\"server\" ImageUrl=\"~/Images/go.png\" 
            PostBackUrl=\"~/Rep.aspx\" />

    

解决方法

您可以在CSS中完成此操作：

<style type=\"text/css\">
    #ImageButton1:hover { background-image: url(\'~/your_url/here\') }
</style>

    ,将您的代码更改为此

<asp:ImageButton ID=\"ImageButton1\" runat=\"server\" ImageUrl=\"~/Images/go.png\" 
        PostBackUrl=\"~/Rep.aspx\" data-imageover=\"~/Images/go-hover.png\" />

您可以有多个图像按钮，例如：

<asp:ImageButton ID=\"ImageButton1\" runat=\"server\" ImageUrl=\"~/Images/go1.png\" 
        PostBackUrl=\"~/Rep.aspx\" data-imageover=\"~/Images/go1-hover.png\" />
<asp:ImageButton ID=\"ImageButton2\" runat=\"server\" ImageUrl=\"~/Images/go2.png\" 
        PostBackUrl=\"~/Rep.aspx\" data-imageover=\"~/Images/go2-hover.png\" />
<asp:ImageButton ID=\"ImageButton3\" runat=\"server\" ImageUrl=\"~/Images/go3.png\" 
        PostBackUrl=\"~/Rep.aspx\" data-imageover=\"~/Images/go3-hover.png\" />

然后添加脚本

$(function() {
    // search all input type image,where data-imageover exists
    $(\"input[type=\'image\'][data-imageover]\").each(function() {
        $(this).hover(
            function() {  // on mouseover
                $(this).data(\"originalImg\",$(this).prop(\"src\")); // save original
                $(this).prop(\"src\",$(this).prop(\"data-imageover\"));
            },function() {  // on mouseout
                $(this).prop(\"src\",$(this).data(\"originalImg\")); // change to original
            }
    });
});

    ,

$(document).ready(function(){
    $(\"input[type=\'image\']\").hover(function(){
        $(this).attr(\"src\",\"your/image.png\");
    },function(){
        $(this).attr(\"src\",\"your/old/image.png\");
    });
});

    ,我同意上面的George Cummins的回答，但是，我不得不切换到LinkBut​​ton并在CSS中定义按钮尺寸：

    <%@ Page Title=\"Home Page\" Language=\"C#\" MasterPageFile=\"~/Site.master\" AutoEventWireup=\"true\"
    CodeBehind=\"Default.aspx.cs\" Inherits=\"Sandbox_Asp.NET._4._0._Default\" %>

<asp:Content ID=\"HeaderContent\" runat=\"server\" ContentPlaceHolderID=\"HeadContent\">
    <style type=\"text/css\">
        .ImgBtnAdd
        {
            background-image: url(\'/images/add.png\');
            background-repeat: no-repeat;
            display: block;
            height: 31px;
            width: 60px;
            border: 0;
            outline: 0 !important;
        }
        .ImgBtnAdd:hover
        {
            background-image: url(\'/images/add_over.png\');
        }
    </style>
</asp:Content>
<asp:Content ID=\"BodyContent\" runat=\"server\" ContentPlaceHolderID=\"MainContent\">
    Hover over the button:
    <asp:LinkButton runat=\"server\" ID=\"LinkButtonAdd\" CssClass=\"ImgBtnAdd\"
        ToolTip=\"Add Button\" Text=\"\" />
</asp:Content>

    ,首先将其与（id或class）悬停功能绑定 http://api.jquery.com/hover/ 使用attr更改图像的src http://api.jquery.com/attr/     ,你可以试试这个...

var old_image = \'\';

$(\'<%= this.ImageButton1.ClientID %>\').hover
(
  function()
  {
    old_image = $(this).attr(\'src\');
    $(this).attr(\'src\',\'/path/to/new_image\');
  },function()
  {
    $(this).attr(\'src\',old_image);
  }
);

您应该在脚本块内的按钮声明之后立即使用它。