悬停图像 HTML：响应式？答案

【问题标题】：Hover image HTML : responsive?悬停图像 HTML：响应式？
【发布时间】：2016-12-29 19:02:14
【问题描述】：

我正在尝试使用这个简单的 html 代码在 wordpress 中连续创建 2 个悬停图像（见下文）。

&lt;a href="#"&gt;&lt;img src="image1.jpg" onmouseover="this.src:'image2.jpg'" onmouseout="this.src:'image1.jpg'"&gt;&lt;/a&gt;

但是，每当我从同一页面修改另一个模块时，不仅悬停不再响应，而且没有记录在模块中首先编写的 HTML 代码。有没有办法“保护”我的代码不被覆盖？像以避免丢失空格。在另一件事上，我还希望该代码具有响应性：每当我缩小屏幕时，图像不在同一位置。（没有javascript，请只使用CSS和简单！我是新手）

谁能帮帮我？

谢谢！

【问题讨论】：

您可以将您的 HTML 代码粘贴到问题中吗？此外，由于这似乎与 wordpress 没有任何关系，我建议删除该标签，并在范围内保持问题简单。
我正在使用如上所述，它确实有效！唯一的问题是当我修改页面中的其他模块然后代码不再工作并且实际上丢失了......
@Elisap 您需要编辑您的问题并包含您当前使用的所有 HTML 和 CSS。

标签： html css wordpress

【解决方案1】：

您可以添加两个图像，如下所示（使用 Css）：

    a:hover:after {
    content: url(image/circle.PNG); 
    display: block;
    }

    a:hover {
     content: url(image/anyother.PNG); 
     display: block;
   }

谢谢，希望这会有所帮助

【讨论】：