MouseEnter / MouseOut 事件答案

【问题标题】：MouseEnter / MouseOut eventsMouseEnter / MouseOut 事件
【发布时间】：2017-06-28 05:32:24
【问题描述】：

我一直在在线阅读文章，观看 YouTube 视频 - 我迷路了。这是我尝试过的最后一段代码，在您阅读本文时，它现在可能已经改变了。看起来很简单，我不明白我做错了什么？我的头脑就是无法理解这一点。有什么帮助吗？当鼠标悬停在图像（src）上时，我试图用（id）中的图像替换图像（src）。现在，当我将鼠标悬停在图像上时，我真的只是想获得警报。随便！

**** 更新代码****

这只是在！我是个白痴。 Javascript 文件未正确定向，缺少子文件夹。仍在挣扎，但现在至少我的翻转工作正常。 手掌到额头

HTML：

<!DOCTYPE HTML>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="styles/main.css">
<script src="js/rollover.js"></script>
    </head>

    <body>
    <h1>Rollover Test</h1>
    <ul id="rollover_test">
        <li>
            <img src="images/h1.jpg" alt="img1" id="images/h4.jpg" onmouseover="MouseOver('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="img2" id="images/h5.jpg">
        </li>
        <li>
            <img src="images/h3.jpg" alt="img3" id="images/h6.jpg">
        </li>
    </ul>        
    </body>
    </html>

Javascript：

var $ = function (id) {
return document.getElementById(id);
};

function MouseOver(id){ 
// I'm trying to figure out the syntax in here to swap the id and src tags
alert($("id").src);

};

function MouseOut(id){
alert("out");
}

window.onload = function () {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

【问题讨论】：

我觉得这个链接可以帮到你：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
$("li").on('mouseenter', function(){alert("yep"); }); - 缺少右括号。

标签： javascript jquery mouseenter mouseout

【解决方案1】：

其实，这简单的三行代码就足以让它工作起来。

$("img").on('mouseenter', function() {
  $(this).attr("src", $(this).attr('id'));
});

img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg" alt="Img1" id="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg">
  </li>
  <li>
    <img src="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg" alt="Img2" id="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg">
  </li>
  <li>
    <img src="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg" alt="Img3" id="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg">
  </li>
</ul>

【讨论】：

@Thanasis - 我拒绝了您的编辑，因为问题的作者标记为 jquery，因此无需通知所有人我的解决方案需要它。
哦，我没注意到。但是，也许 OP 可能无法使其工作，因为他忘记包含 jQuery。这是我的意图。
@Thanasis 无论如何谢谢 :)
是的 - 我没有那个 jquery 脚本。几天来我一直在思考这个愚蠢的事情，并决心今晚完成它，但我已经花在它上面了。我必须错过这么简单的东西。无论如何，添加那个小东西并没有什么不同。
@user3330694 有什么问题？ :)

【解决方案2】：

在您的 HTML 中，id 属性已更改为 data-id，因为最好保留 id 属性以进行 css 识别。

通过协同使用 mouseenter 和 mouseleave，以下 sn-p 会查看遇到的每个图像，并将其 src 属性交换为附加到该图像的临时 data-temp 属性。

希望 sn-p cmets 是不言自明的。

$("li").find('img').on({
  mouseenter: function() {
    $this = $(this); // get the current img object
    var src = $this.attr('src'), // get the current src
      id = $this.attr('data-id'); //get the alternative src
    $this.data('temp', src); // store in a new temporary data attribute
    $this.attr('src', id);
  },
  mouseleave: function() {
    var temp = $(this).data('temp'); // lookup temp
    $(this).attr('src', temp); // swap image back
  }
})


/*

var $ = function(id) {
  return document.getElementById(id);
};

function MouseRollover(img) {
  alert("made it");
  var oldIMG = $(this).attr("src");
  var newIMG = $(this).attr("id");
};

window.onload = function() {
    //preload images
    var links = document.getElementsByTagName("li");
    var i, link, image;
    for (i = 0; i < links.length; i++) {
      links = links[i];
      image = new Image();
    }
    //rollover
    $("li").on('mouseenter', function() {
          alert("yep");
        });
        
     }

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSm2etjS8VnJRwuZA8ormtAyPrIt8x0twLr-APiGwrkcX8NXe3P" alt="Img1" data-id="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-W40Oxb_QCTaGT9MVgTuXaDxacAKgChfvATaS9KffbHfGc16n">
  </li>
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTp6eZg_pJb0_NFxdaFYSnqMzPMJc-R_iwp2x8HarvdKzoNaCXv" alt="Img2" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwvO67upMvk1q3MicNCujQ67D2EgJf8HyVA36FqM9qrv2B4Mue">
  </li>
  <li>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREN8xal0JlNdcPcz-94kQqZ8t3uBWEfm3T4LWpPY5PhX7qndGp" alt="Img3" data-id="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT07dVJl5ghqji58Su7Gs9RuSuCgleBDUITx2Dngh3ibVWzLfde">
  </li>
</ul>

【讨论】：

【解决方案3】：

* 已解决 *

一旦我发现我的 javascript 链接不正确，这只是一个使用语法的问题。超级容易。我是个白痴。

HTML

        <ul id="image_rollovers">
        <li>
            <img src="images/h1.jpg" alt="images/h4.jpg" id="img1" onmouseenter="MouseEnter('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="images/h5.jpg" id="img2" onmouseenter="MouseEnter('img2');" onmouseout="MouseOut('img2')">
        </li>
        <li>
            <img src="images/h3.jpg" alt="images/h6.jpg" id="img3" onmouseenter="MouseEnter('img3');" onmouseout="MouseOut('img3')">
        </li> 
    </ul>

JAVASCRIPT

var $ = function (id) {
return document.getElementById(id);
};

function MouseEnter(id){
var img = $(id);
originalURL = img.src;
var newURL = img.alt;

img.src = newURL;
};

function MouseOut(id){
var img = $(id);

img.src = originalURL;
}

window.onload = function () {
var originalURL;
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

像魅力一样工作。

谢谢大家的提示和建议。

【讨论】：

如果您将我的答案标记为最佳答案会很好，因为它已经引导您解决了您的问题:)