Question

我有图像作为我的网站菜单按钮，我想在用户将鼠标悬停或打开页面时将图像更改为另一个图像。

所以，我在我的_Layout.cshtml中设置了悬停功能：

 <div id="menubutton">
        <a href="@Url.Action("Index", "Home")" id="bg1">
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/homebutton.png")" alt="home" id="homebutton" />
        </a><a href="@Url.Action("Index", "Kitchen")" id="bg2">
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/kitchenbutton.png")" alt="kitchen" id="kitchenbutton" />
        </a><a href="@Url.Action("Index", "Stock")" id="bg3" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/stockbutton.png")" alt="stock" id="stockbutton" /></a>
        <a href="@Url.Action("Index", "Shop")" id="bg4" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton.png")" alt="shoppinglist" id="shopbutton" /></a>
        <a href="@Url.Action("Index", "Recipe", new { id = 0 })" id="bg5" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/recipebutton.png")" alt="recipe" id="recipebutton" /></a>
        <a href="@Url.Action("Index", "Report")" id="bg6" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/reportbutton.png")" alt="report" id="reportbutton" /></a>
        <a href="@Url.Action("Index", "Notification")" id="bg7" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/notificationbutton.png")" alt="notification" id="notificationbutton" /></a>
        <a href="@Url.Action("Index", "Information", new { id = 0})" id="bg8" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/infobutton.png")" alt="info" id="infobutton" /></a>
    </div>

   // Store the old src of the image before hover to reapply after hover
    var oldsrc = "";
    $('#menubutton img').hover(
        function () {
            var name = $(this).attr('id') + '_o';
            oldsrc = $(this).attr('src');
            var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png';
            $(this).attr('src', newsrc);
        },
        function () {
            var name = $(this).attr('id');
            //var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png';
            $(this).attr('src', oldsrc);
        }
    );

（注意：我在部署后使用AppSettings获取正确的图像路径）

在每一页，我都想将图像设置为突出显示当前页面用户：

 $('#bg4 img').attr('src', '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton_o.png")');

目前，似乎工作正常。但如果图像悬停被多次触发，图像src将变为“”，因此图像消失。

我找不到原因，所以希望可以在这里得到一些帮助......

非常感谢

Answer 1

据我了解你的问题，你可以试试这个。

   // Store the old src of the image before hover to reapply after hover
    var oldsrc = {};
    $('#menubutton img').hover(
        function () {
            var name = $(this).attr('id') + '_o';
            oldsrc[name] = $(this).attr('src');
            var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png';
            $(this).attr('src', newsrc);
        },
        function () {
            var name = $(this).attr('id');
            $(this).attr('src', oldsrc[name]);
            delete oldsrc[name];
        }
    );

Answer 2

这可能会发生，因为您对所有<img>元素使用相同的变量。您应该以对特定元素进行键入的方式存储oldsrc，而不是在所有变量之间共享一个变量。

执行此操作的一种方法是通过the jQuery .data method。

代码：

$('#menubutton img').hover(
    function () {
        var oldsrc = $(this).attr('src');
        $(this).data('oldsrc', oldsrc); // Attach data to element

        var name = $(this).attr('id') + '_o';
        var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())'
            + '/Content/New_Layout/' + name + '.png';
        $(this).attr('src', newsrc);
    },
    function () {
        var oldsrc = $(this).data('oldsrc'); // Extract data from element
        $(this).attr('src', oldsrc);
    }
);

jquery悬停以更改图像src显示空图像

2 个答案: