Question

我正在尝试使用JQuery在hover上更改img src。我正在使用Brackets，当我运行Chrome预览时，一切都很好。但是，当我直接在Chrome上打开文件时，它无法正常工作（与IE相同）。

我的代码：

LocExtension

编辑：这是HTML代码：

$("#logo img").hover(
    function(){
              $("#logo img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo img").attr("src","/images/img2.gif");
});

img标签有一个id＆＃34; logo-img＆＃34;，但直接使用此ID并没有帮助：

<div id="logo">
    <img id="logo-img" src="images/img1.gif" alt="logo">
</div>

感谢您的帮助。

Answer 1

使用CSS

img:hover {
  background: url("https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}

<img src="https://www.vacul.org/extension/site/design/site//images/anonymous-user.png" />

使用JS

$("#imghover").hover(function(){
  $(this).attr("src", "https://www.vacul.org/extension/site/design/site//images/anonymous-user.png");
}, function(){
  $(this).attr("src", "https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imghover" src="https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1">

Answer 2

它应该工作。试试这个：

$("#myImage").hover(function(){
  $(this).attr("src", "https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg");
}, function(){
  $(this).attr("src", "https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="myImage" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg">

尝试运行它。这可能是您的图片ID存在问题。同时使用$(this)可以更轻松。

JQuery在hover上改变img src并不起作用

2 个答案: