悬停时如何更改大量img

Question

我是一名新的网络开发人员，所以我不知道最佳实践。

我在页面上有一些图像，我想在悬停时更改它们。我找到了两个解决方案，但我不知道哪个更好。

HTML 中的第一个：

<td>
  <a href="getContent('unlight');">
    <img src="res/images/unlight/p_first.png"
         onmouseover="this.src='res/images/light/p_first.png'" alt="First"
         onmouseout="this.src='res/images/unlight/p_first.png'"/>
    <br>first
  </a>
</td>

第二个使用 CSS：

<td id="first" onclick="getContent('first');">First</td>

#first{
    background: no-repeat url("./images/unlight/p_first.png");
    width: 78px;
    height: 78px;
    }

#first:hover {
    background: no-repeat url("./images/light/p_first.png");
    width: 78px;
    height: 78px;
}

现在我需要为每个 img 写两条路径。

这可以自动化吗？如何做到专业、通用？

Answer 1

这可能是接触jQuery 的好时机。您基本上可以编写一种更动态的方式来完成您想要的事情，类似于您当前在onmouseover 和onmouseout 属性中所做的事情。另外，jQuery 允许您将这种逻辑从 HTML 标记中取出并放入一个完全独立的 .js 文件中。

一旦你包含了 jQuery，你就可以创建一个看起来像这样的脚本。 （我尝试过大量评论，以便您了解发生了什么：

$(document).ready(function() {
    // Any `img` tag with a class of `some-class` (or whatever you want) will get this behavior on hover
    $("img.some-class").hover(
        // This first handler is for the `onmouseover` state
        function() {
            // Storing a query for `this` in a variable only runs the query once. Otherwise, you'd run it twice in the line below
            var $this = $(this);
            // Replace `/light/` in the image URL with `/unlight/`
            $this.attr("src", $this.replace("/light/", "unlight"));
        },
        // This second handler is for the `onmouseout` state
        // Its logic is similar to the first handler, so I'll omit comments explaining it
        function() {
            var $this = $(this);
            $this.attr("src", $this.replace("/unlight/", "light"));
        }
    );
});

现在您应该能够将每个图像的light 和unlight 版本存储在light 和unlight 子文件夹中。确保两个图像具有相同的文件名。然后将class="some-class" 添加到您希望具有此行为的img 标记中。

补充阅读：

• jQuery hover() method
• jQuery attr() method
• JavaScript replace() method

Answer 2

使用可以使用第二件事，但 html 应该是正确的值。仅td 值是不够的。

 <div id="first" >First</div>​

圆顶在这里http://jsfiddle.net/4qQPL/1/

Answer 3

显然有很多方法可以做到这一点，但这是一种方法。

将您的两张图片合并为一张图片，将该图片用作背景图片，并在悬停/聚焦时更改图片的背景位置以显示第二张图片。

此外，除非您显示表格数据，否则您真的不应该在您的网站上使用表格。坚持使用 DIV 标签、SECTION 标签等。

例子：

<a id="image1" class="hover-image" href="#">First</a>

// set a class which contains global settings for all relevant images.

a.hover-image {
 width:XXXpx;
 height:XXXpx;
 background-repeat:no-repeat;
 background-position:0 0;
}

a.hover-image:hover, a.hover-image:focus {
 background-position:XXXpx XXXpx;
}


// set the background image path based on a unique ID.

a#image1 {
 background-image:url(XXX.png);
}

Answer 4

css

.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/myImage.png') bottom;
    text-indent: -99999px;
}
.myButtonLink:hover {
    background-position: 0 0;
}

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>