Html 悬停时如何改变很多img

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

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

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

首先
#首先{
背景：无重复url（“./images/unlight/p_first.png”）；
宽度：78px；
高度：78px；
}
#第一：悬停{
背景：无重复url（“./images/light/p_first.png”）；
宽度：78px；
高度：78px；
}

现在，对于每个img，我需要写两条路径

这能自动化吗？如何做到专业化和通用化？

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>

---

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

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

另外，除非你显示的是表格数据，否则你真的不应该在网站上使用表格。坚持使用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);
}

//设置一个类，该类包含所有相关图像的全局设置。
a、 悬停图像{
宽度：XXXpx；
高度：XXXpx；
背景重复：无重复；
背景位置：0；
}
a、 悬停图像：悬停，a{
背景位置：XXXpx XXXpx；
}
//根据唯一ID设置背景图像路径。
a#图1{
背景图片：url（XXX.png）；
}

Use可以使用第二种方法，但html应该使用正确的值。只有

td

值是不够的

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

首先​

---

圆顶在这里

这可能是一个很好的时间来接触。基本上，您可以编写一种更动态的方式来完成您想要的任务，类似于您当前在

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

标记中

额外阅读：

---

但那将是一个img。我有几个不同的img，例如：Kancellaria
ogĹoszenia
duszpasters2和CSS#Kancellaria{背景：无重复url（“/images/nieposwietlone/p"kancellaria.png”）；宽度：78px；高度：78px；}Kancellaria:hover{背景：无重复url（“./images/podswietlone/p"kancellaria.png”）；宽度：78px；高度：78px；}现在是这样，但我想要更多的通用是的。但问题是当我有50张图片时。我需要所有的创建样式。我太懒了。我想了一些脚本？这仍然是个问题，因为所有的图片我需要创建新的样式。想象一下，我需要创建50张图片。然后这不是实践。意思是，当你需要时，多个图片显示在单幅图像上的垂直高度和宽度？意味着一个图像悬停改变这个图像。像按钮。但我有50个按钮。意味着，你悬停在一个按钮图像上，49个图像，但将改变为第一个btn图像。对吗？每个按钮都有自己的悬停img。每个按钮都是独立的。你知道我的意思吗？是的，我正在考虑这个解决方案e、 但我不确定它是否“专业”方法。它经常在这个问题上使用解决方案？这取决于具体情况。我认为这在你的情况下是有意义的，因为你有太多的图像需要这种处理。@Billy Moat的解决方案在所有图像大小完全相同的情况下是有意义的，尽管我更喜欢在页面上有一个实际的

标记，而不是一堆

背景图像。本页还介绍了其他基于CSS的解决方案：（实际上我可能更喜欢基于CSS的解决方案。）您可以使用CSS悬停图像，不需要javascript。