Question

什么是jquery脚本来改变按钮鼠标悬停时的图像？

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

Answer 1

您可以在CSS中执行此操作：

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

Answer 2

将您的代码更改为此

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

Answer 3

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

Answer 4

我同意George Cummins的回答，但是，我必须切换到LinkButton并在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>

Answer 5

首先用（id或class）悬停函数

绑定它

http://api.jquery.com/hover/

使用attr

更改图像的src

http://api.jquery.com/attr/

Answer 6

你可以试试这个......

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

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

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

6 个答案: