Javascript Alt属性的问题

我需要jquery代码方面的帮助。我开发了一个网站，当我们在主页、关于我们等导航选项卡上悬停时，标题图像将发生变化。问题是我在“alt”属性中包含了悬停时需要更改的图像。这在chrome上很好用，但在firefox和IE上不行。该网站的链接是

            http://datacrawl.in/home.html

HTML:

<ul>
<li><a href="home.html"> Home  </a><span style = "color: #FFF; position: relative;  left: 23px; "> | </span></li>
<li><a class = "ser" alt = "images/7.jpg" href="about.html"> About Us</a><span style = "color: #FFF; position:             relative; left: 23px;"> | </span></li>
<li><a class = "ser" alt = "images/5.jpg" href=""> Services </a> <span style = "color: #FFF; position: relative; left:     23px;"> | </span>
<ul>
<li style = "background-color: #8e64b0;"><a class = "ser" alt =  "images/3.jpg" href="software.html"> Software             Development </a></li>
<li style = "background-color: #7b55a0;"><a class = "ser" alt = "images/2.jpg" href="web.html"> Web & Graphic              Designing </a></li>
<li style = "background-color: #8e64b0;"><a class = "ser" alt = "images/4.jpg" href="technical.html"> Technical            Training </a></li>
</ul>
</li>
<li><a class = "ser" alt = "images/6.jpg" href=""> Portfolio  </a><span style = "color: #FFF; position: relative;          left: 23px;"> | </span>
</ul>

---

因此，当我将鼠标移到具有类heading1、heading2和ser的链接上时，它会将标题图像更改为我设置的相应alt属性图像。这在firefox和IE中不起作用。请帮我解决这个问题。谢谢。

更改img源对我来说不是一个好主意，试着制作一个背景精灵，并通过在标题中添加类来移动它。

哦，上帝，请不要为了这种目的滥用alt标记。您可以将数据属性用于这种情况：

<li><a class="ser" data-header-image="images/3.jpg" href="my-page.html">Link Text</a></li>

您的javascript可以保持基本不变，但请查看该数据属性。Alt属性具有语义含义，因此不应该被误用。你的代码对于任何一个有屏幕阅读器的人来说都是非常混乱的

---

我也赞同其他人关于确保你的间隔等是正确的和你的结束标签在那里的看法。。。那也会引起问题

天哪，不！不要使用

alt

存储数据。改用

数据
属性。这就是它的设计目的

此外，它可能不起作用，因为您已将
alt
放置到锚定标记上
alt
仅用于
img
标签

HTML重写：

<ul>
    <li><a href="home.html">Home</a><span style = "color: #FFF; position: relative;  left: 23px; "> | </span></li>
    <li><a class = "ser" data-image = "images/7.jpg" href="about.html"> About Us</a><span style = "color: #FFF; position: relative; left: 23px;"> | </span></li>
    <li><a class = "ser" data-image = "images/5.jpg" href=""> Services </a> <span style = "color: #FFF; position: relative; left: 23px;"> | </span>
        <ul>
            <li style = "background-color: #8e64b0;"><a class = "ser" data-image =  "images/3.jpg" href="software.html"> Software Development </a></li>
            <li style = "background-color: #7b55a0;"><a class = "ser" data-image = "images/2.jpg" href="web.html"> Web & Graphic Designing </a></li>
            <li style = "background-color: #8e64b0;"><a class = "ser" data-image = "images/4.jpg" href="technical.html"> Technical Training </a></li>
        </ul>
    </li>
    <li><a class = "ser" data-image = "images/6.jpg" href=""> Portfolio  </a><span style = "color: #FFF; position: relative; left: 23px;"> | </span>
</ul>

$(document).ready(function () {
    $('a.ser').mouseover(function () {
        var src = $(this).data('image');
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', src);
            $(this).fadeIn(50);
        });
    });
    $('a.ser').mouseout(function () {
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', 'images/1.jpg');
            $(this).fadeIn(50);
        });
    });
});

第一步，尝试以可读的方式格式化JavaScript代码。类似的方法也能有所帮助。我在这一次为您做了这件事。请删除“=”和其他属性周围的所有空格，然后重试。您的html很糟糕，请首先通过删除空格来改进代码；它们可能会导致问题。嘿，在FF中工作正常，但你需要给一些时间来加载图像。。只需将鼠标移到菜单上并等待一段时间，不要立即将鼠标移出。第三个也是最后一个
缺少结束标记（
）。这可能会在IES中引起一些问题。它起作用了吗？如果是这样，请考虑将此标记为帮助未来类似问题的其他人的答案。谢谢
$(document).ready(function () {
    $('a.ser').mouseover(function () {
        var src = $(this).data('image');
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', src);
            $(this).fadeIn(50);
        });
    });
    $('a.ser').mouseout(function () {
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', 'images/1.jpg');
            $(this).fadeIn(50);
        });
    });
});