0

我需要 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>

下面给出了我用来执行此操作的 jquery 代码

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

因此，当我将鼠标悬停在标题 1、标题 2 和 ser 类的链接上时，它会将标题图像更改为我设置的相应 alt 属性图像。这在 Firefox 和 IE 中不起作用。请帮我解决一下这个。谢谢你。

4

3 回答 3

1

天哪，不！不要alt用来存储数据。请改用该data属性。这就是它的设计目的。

此外，它可能不起作用，因为您已放置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>

jQuery重做：

$(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);
        });
    });
});
于 2013-03-01T13:12:03.157 回答
0

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

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

您的 javascript 可以保持几乎相同，但请查看该数据属性。Alt 属性具有语义含义，因此不应该被滥用。对于任何使用屏幕阅读器的人来说，您的代码会让人感到困惑。

我还赞同其他人关于确保您的间距等正确并且您的结束标签存在的观点......这也可能导致问题

于 2013-03-01T13:05:02.030 回答
-1

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

于 2013-03-01T11:10:45.370 回答