Question

所以我想制作一个鼠标悬停文本来将图像（第一张图像）更改为其他图像（第二张），但是鼠标不再在文本图像上更改回第一张图像（第一张）

我发现了同样的东西，但是然后你将鼠标悬停在图像上。的 HTML

<a href="URL ADDRESS">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" />
</a>

<a href="URL ADDRESS">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" />
</a>

Answer 1

您需要使用JavaScript或JavaScript框架执行此操作。

如果您正在寻找类似的内容：http://www.twospy.com/galleriffic/example-1.html 看看这个jQuery插件： http://www.twospy.com/galleriffic/#1

以下是其他一些内容： http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/

Answer 2

最好（也是最快）的方法是使用CSS（假设你的html结构可以支持这样的解决方案）。

例如：

<强> HTML

<img class="class-show-hide" src="img1.jpg" />
<img class="class-hide-show" src="img2.jpg" />

<强> CSS

img.class-show-hide
{
   display: inline-block;
}
img.class-hide-show
{
   display: none;
}
img.class-show-hide:hover
{
   display: none;
}
img.class-show-hide:hover + img.class-hide-show
{
   display: inline-block;
}

<强>奖金

你甚至可以添加css过渡/动画以获得更好的效果，这会使纯粹的js解决方案变得缓慢，如果不是不可能的话

更新

对于给出的html示例，此解决方案可以这样应用：

<a href="a.url.here" class="hover-link">
<img class="class-show-hide" src="img1.jpg" />
<img class="class-hide-show" src="img2.jpg" />
</a>

<强> CSS

a.hover-link
{
    position: relative;
    display: inline-block;
    min-width: 200px;
    min-height: 200px;
}
a.hover-link .class-show-hide
{
   position: absolute;
   display: block;
   visibility: visible;
   z-index: 2;
}
a.hover-link .class-hide-show
{
   position: absolute;
   display: block;
   visibility: hidden;
   z-index: 1;
}
a.hover-link:hover .class-show-hide
{
    visibility: hidden;
    z-index: 0;
}
a.hover-link:hover .class-hide-show
{
    visibility: visible;
    z-index: 2;
}

注意：为了使用文字而不是第二张图片，只需使用

即可

<span class="class-hide-show">text here</span>

元素而不是第二个图像并相应地调整css

jsfiddle example here

如何使文本更改其他图像然后用户鼠标悬停文本

2 个答案: