【问题标题】:Change image src on hover using URL as ID使用 URL 作为 ID 在悬停时更改图像 src
【发布时间】:2016-12-05 23:17:23
【问题描述】:

我正在尝试在悬停时更改图像 src。

我想通过 URL 或替代文本来标识图像,因为在这种情况下我无法添加类。

我尝试了这个 Stack Overflow 链接中的说明,但没有成功:

CSS: Change image src on img:hover

当鼠标悬停在该图片的 URL 上时:

https://static1.squarespace.com/static/5463b725e4b06d233c3a876a/t/56a921809cadb641f7ce1a09/1453912583654/Screen+Shot+2016-01-27+at+8.34.20+AM.png?format=750w

我想把它改成这个图片:

(我有这张图片的链接,但我的帖子中不能使用两个以上的链接)

这是我页面的 URL:

https://toby-thiermann.squarespace.com/new-index/

谢谢。

【问题讨论】:

    标签: jquery css image hover


    【解决方案1】:

    通常最好的方法是不使用标签,而是使用 CSS。然后使用背景图像方法并将其添加到您的 div 将允许您换出图像。

    试试这样的:

    <div class="your-class-here"></div>
    

    然后像这样的css:

    .your-class-here{
      width: 200px;
      height: 200px;
      background-image: url("your-non-hover-image")
      transition: all ease 250ms
    }
    .your-class-here:hover{
      background-image: url("your-hover-image")
    }
    

    我添加了一个过渡,这只是让它更平滑一点。

    【讨论】:

      猜你喜欢
      • 2023-03-11
      • 1970-01-01
      • 1970-01-01
      • 2015-01-16
      • 1970-01-01
      • 2014-02-22
      • 2018-11-11
      • 2016-08-07
      • 1970-01-01
      相关资源
      最近更新 更多