wordpress - 鼠标悬停时的不同图像

Question

我目前在 Wordpress 中使用 Visual Composer。我现在希望在鼠标悬停时简单地更改图像。我已经阅读了许多使用 Java 和 CSS 执行此操作的不同方法，但似乎没有什么是专门针对此的。

非常感谢！

Answer 1

工作示例检查它，用你自己的替换图像。

 <a class="foo" href="#">
     <img src="http://lorempixel.com/400/200/food/1/" />
     <img src="http://lorempixel.com/400/200/food/2/" />
 </a>

 <style>
    .foo img:last-child{display:none}
    .foo:hover img:first-child{display:none}
    .foo:hover img:last-child{display:inline-block}
 </style>

http://jsfiddle.net/gd8ba/light/

Thanks

Answer 2

我知道这篇文章很旧，但最近我有同样的询问，所以我找到了这个插件https://es.wordpress.org/plugins/image-over-image-vc-extension/。我已经在 WP 5.6.3 上使用 WPBakery 对其进行了测试，并且效果很好。

这是演示。希望它适用于任何需要此功能的人。

Answer 3

说，我有一个链接 -

<a class="my-link" href="http://www.my-website.com"></a>

我需要在此链接上的鼠标上显示图像。所以，我将在我的 CSS 中添加两件事——

1. 将图像添加到链接

   .ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;}
   

2. 添加悬停属性

   .ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;}