Question

我在HTML代码中有一张图片，我想制作它，以便当鼠标悬停在图片上时，它将变为另一张图片，而当鼠标不是时将鼠标悬停在图像上，它将切换回默认值。如何在<script>标签中对此进行编程？

Answer 1

不需要db.fixtures.updateMany({"competition": "League Division 1"}, {"set":{"comp_id":"5c65d916456b5d0e207778ac"}})标签。使用append(contentsOf:)和init(_:)更改图像源。

guard let currentHeartRate = heartRateData else { return } guard MFMailComposeViewController.canSendMail() else { // show alert return } let formatter = DateFormatter() formatter.dateFormat = "dd.MM.yyyy" let mail = MFMailComposeViewController() // note that your view controller must conform to MFMailComposeViewControllerDelegate mail.mailComposeDelegate = self mail.setToRecipients([""]) let heartRateUnit = HKUnit.count().unitDivided(by: .minute()) let quantityStrings = currentHeartRate .compactMap { $0 as? HKQuantitySample } .map { "<p>Your Heart Rate is: \($0.quantity.doubleValue(for: heartRateUnit)) on \(formatter.string(from: $0.startDate)) </p>" } mail.setMessageBody(quantityStrings.joined(separator: "<br>"), isHTML: true) present(mail, animated: true)将在您的鼠标悬停在图片上时执行一个操作。在这种情况下，我们使用extension ViewController: MFMailComposeViewController { }将图片src设置为另一张图片。

window.open将在您的鼠标移出图像时执行操作。在这种情况下，我们再次使用for(...){ window.open('index.html', '_blank', 'nodeIntegration=yes');将图片设置为默认图片。

<script>

Answer 2

您可以像这样使用css：

.react {

  background: url('../img/React_Monoo.png');
}

.react:hover {
  background: url('../img/React_Colored.png');
}

react是一个类名

Answer 3

var image = document.getElementById("image");

//Now, we need to add an Event Listener to listen when the image gets mouse over.

image.addEventListener('mouseover', function(){
  image.src = "path/to/newimage"
})
image.addEventListener('mouseout', function(){
    image.src = "path/to/otherimage"
  })

Answer 4

您可以使用 on mouse out 为此。这是我的工作。

<html>
<head>
</head>

<body>
 <script>

 function setnewimage() {
 document.getElementById("img2").src = "myquiz1.png";
 }
 function setnewimage1() {
 document.getElementById("img2").src = "myquiz2.png";
 }
 function setnewimage2() {
 document.getElementById("img2").src = "myquiz3.png";
 }
 function setnewimage3() {
 document.getElementById("img2").src = "pic33.png";
 }
 function setoldimage() {
 document.getElementById("img2").src = "myquiz1.png";
 }
 </script>
 <div>
 <img id="img2" src="" width="300">
 <br>
 <img id="img1" src="myquiz1.PNG" onmouseover="setnewimage()"
width="300" onmouseout="setoldimage()">
 <img id="img66" src="myquiz2.PNG" onmouseover="setnewimage1()"
width="300" height="200" onmouseout="setoldimage()">
 <img id="img87" src="myquiz3.PNG" onmouseover="setnewimage2()"
width="300" height="200" onmouseout="setoldimage()">
 <img id="img80" src="pic33.PNG" onmouseover="setnewimage3()"
width="300" height="200" onmouseout="setoldimage()">
 </div>
</body>
</html>

鼠标悬停时，在JavaScript中更改图片

4 个答案: