Question

我有一个向下箭头图像，我正在尝试使用jQuery在悬停时替换。我看过使用纯CSS和背景图像的解决方案示例：但是我已经有背景了，所以不确定是否可以选择

我知道之前已经有人问过这个问题，但是我似乎无法使其工作

我要去哪里错了？

var currentImage;

$("#contentDiv").hover(function() {
  currentImage = $('img', this).attr("src", "http://icons.iconarchive.com/icons/icons-land/play-stop-pause/256/Record-Normal-Red-icon.png");
  $('img', this).attr("src", "https://cdn3.iconfinder.com/data/icons/UltimateGnome/256x256/actions/gtk-media-record.png");
}, function() {
  $('img', this).attr("src", currentImage);
});

#contentDiv {
  justify-content: center;
  bottom: 2%;
  display: block;
  height: 50px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 50px;
}

.arrowDown {
  animation: bouncing 2s infinite ease-in-out;
  bottom: 2%;
  display: block;
  height: 30px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentDiv">
  <img src="https://cdn3.iconfinder.com/data/icons/UltimateGnome/256x256/actions/gtk-media-record.png" class="arrowDown" />
</div>

Answer 1

应该为currentImage = $('img', this).attr("src");，因为您不是要设置值，而是要获取值

$('img', this).attr("src", "whitedot.png") =将src的值设置为whitedot.png

$('img', this).attr("src") =获取src属性的值

工作演示

var currentImage;

$("#contentDiv").hover(function () {
     currentImage = $('img', this).attr("src");
     $('img', this).attr("src", "reddot.png");
      console.log($('img', this).attr("src"))
}, function () {
     $('img', this).attr("src", currentImage);
      console.log($('img', this).attr("src"))
});

#contentDiv {
justify-content: center;
bottom: 2%;
display: block;
height: 50px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 50px;
}

.arrowDown {
animation: bouncing 2s infinite ease-in-out;
bottom: 2%;
display: block;
height: 30px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 30px;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentDiv">
   <img src="whitedot.png" class="arrowDown"/>              
</div>

Answer 2

您获取属性值和更改属性值的js语法错误。将您的js脚本更改为

var currentImage ="";
$("#contentDiv").hover(function () {
     currentImage = $('img',this).attr("src");
     $('img',this).attr("src", "reddot.png");
}, function () {
     $('img',this).attr("src", currentImage);
});

Answer 3

您可以使用:hover并在显示另一个元素时隐藏该元素：

div {
  display: inline-block;
  width: 100px;
  text-align: center;
  border: solid 1px silver;
  background-image: url('https://image.freepik.com/free-vector/grey-square-pattern-background-vector-illustration_1164-1350.jpg');
  background-size: cover;
}

img {
  width: auto;
  height: 50px;
}

.show-on-hover {
  display: none;
}

.hide-on-hover {
  display: inline;
}

div:hover .show-on-hover {
  display: inline;
}

div:hover .hide-on-hover {
  display: none;
}

<div>
  <img class="hide-on-hover" src="https://www.freeiconspng.com/uploads/no-image-icon-13.png">
  <img class="show-on-hover" src="http://cdn.onlinewebfonts.com/svg/img_299591.png">
</div>

Answer 4

我能够执行您想做的事，但无法使用悬停功能。

这是一个说嘿的函数！当鼠标悬停在我上方时，执行此功能（changeImage）

$(function() {
  $("#image1").on("mouseover", changeImage);
});

接下来，我们有一个函数说鼠标离开时运行此函数。（changeImageBack）

$(function() {
  $("#image1").on("mouseout", changeImageBack);
});

现在，我们必须执行我们提到的两个功能。下面的changeImage使用src属性并对其进行更改。

function changeImage() {
  $("#image1").attr("src", "rabid_dog.png");
}

最后，当changeImageBack会在鼠标离开时将scr属性改回

function changeImageBack() {
  $("#image1").attr("src", "me.png");
}

悬停jQuery上的图片替换

4 个答案: