Question

我在jquery代码中需要帮助。我开发了一个网站，当我们将鼠标悬停在Home，About Us等导航标签上时，标题图片会发生变化。问题是我在“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);
        });
    });
});

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

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

Answer 2

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

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

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

我还有第二个人的观点，即确保你的间距等是正确的，你的结束标签就在那里......这也可能导致问题

Answer 3

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

Alt属性问题

3 个答案: