悬停时如何更改大量img

Posted 2023-03-05

【中文标题】悬停时如何更改大量img

【英文标题】：How to change a lot of img when hover

【发布时间】：2012-10-28 14:34:41

【问题描述】：

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

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

html 中的第一个：

<td>
  <a href="getContent('unlight');">
    <img src="res/images/unlight/p_first.png"
         onmouseover="this.src='res/images/light/p_first.png'" 
         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 写两条路径。

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

【问题讨论】：

您可以使用 css 将图像悬停，无需 javascript。

【参考方案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

【讨论】：

是的，我正在考虑这个解决方案，但我不确定它是否是“专业”方法。经常在这个问题上使用解决方案？

视情况而定。我认为这在您的情况下是有道理的，因为您有很多图像需要这种处理。如果所有图像的大小完全相同，@Billy Moat 的解决方案是有意义的，尽管我更喜欢在页面上有一个实际的<img> 标签，而不是一堆带有背景图像的<div>s。本页还介绍了其他基于 CSS 的解决方案：***.com/questions/5249229/darken-image-on-rollover（我实际上可能更喜欢基于 CSS 的解决方案。）

【参考方案2】：

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

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

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

【讨论】：

这仍然是个问题，因为我需要为所有图像创建新样式。想象一下，我需要创建 50 张图像。那就不练了。

意思是当鼠标悬停在高宽不一的单张图片上时显示多张图片？

表示一个图像悬停更改此图像。喜欢按钮。但我有 50 个按钮。

表示，您将鼠标悬停在一个按钮图像上，这 49 个图像将更改为第一个 btn 图像。对吗？

每个按钮都有自己的 hover-img。每个按钮都是独立的。你知道我的意思吗？

【参考方案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);

【讨论】：

是的。但问题是当我有 50 张图片时。我需要为所有创造风格。我懒得这样做 :D 我在想一些脚本？

【参考方案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>

【讨论】：

但那将是一个 img。例如，我有几个不同的 img：

kancelaria ogĹ‚oszenia duszpasterstwo 和 CSS #kancelaria 背景：无重复 url("./images/niepodswietlone/p_kancelaria.png");宽度：78px；高度：78px； #kancelaria:hover 背景：无重复 url("./images/podswietlone/p_kancelaria.png");宽度：78px；高度：78px；现在是这样，但我想要更通用