我试图使图像消失在鼠标上。我将图像显示在鼠标悬停上,但我希望将其隐藏在鼠标悬停时。我在任何帮助下都没有当前代码?



var fullpic = new Array(4);

for (var i=0;i<fullpic.length;i++)

    fullpic[i] = new Image(515,385);

fullpic[0].src = "images/FrenchQuarter.jpg";
fullpic[1].src = "images/GoldenGateBridge.jpg";
fullpic[2].src = "images/NazarethBay.jpg";
fullpic[3].src = "images/TheAlamo.jpg";


function displayFull(i){
    document.getElementById("img-cover").src=fullpic[i].src;
}


/*This is the function i have to make the image hidden */

function hideFull(i){
    document.getElementById("img-cover").css.visibility=hidden;
}

var fullbanner = new Array(4);

for (var i=0;i<fullbanner.length;i++)

    fullbanner[i] = new Image(468,60);

fullbanner[0].src = "images/banner1.gif";
fullbanner[1].src = "images/banner2.gif";
fullbanner[2].src = "images/banner3.gif";
fullbanner[3].src = "images/banner4.gif";

var n = 0;

window.addEventListener("load",showFull,false);

function showFull(){

    setInterval("showPic()",3000);


}

function showPic(){

    document.getElementById("banner").src=fullbanner[n].src;
    n++;
    if(n>3)
        n=0;

}

<!DOCTYPE html>
<html>
    <head>
      <meta charset = "utf-8">
      <title></title>
      <link rel = "stylesheet" type = "text/css" href = "style.css">
      <script src = "function.js"></script>
    </head>

    <body>
        <div id = "banner-wrapper">
            <img id = "banner" src = "images/banner1.gif">
        </div>

        <div id = "thumbs">
            <img class = "thumb-img" src = "images/FrenchQuarter_small.jpg" onmouseover="displayFull(0)" onmouseout= "hideFull(0)">
            <img class = "thumb-img" src = "images/GoldenGateBridge_small.jpg" onmouseover="displayFull(1)" onmouseout= "hideFull(1)">
            <img class = "thumb-img" src = "images/NazarethBay_small.jpg" onmouseover="displayFull(2)" onmouseout= "hideFull(2)">
            <img class = "thumb-img" src = "images/TheAlamo_small.jpg" onmouseover="displayFull(3)" onmouseout= "hideFull(3)">

        </div>

        <div id = "main-img">
            <img id = "img-cover" src = "">

        </div>

    </body>
</html>

最佳答案

检查错误控制台。你会看到的:

ERROR: {
  "message": "ReferenceError: hidden is not defined",
  "filename": "http://stacksnippets.net/js",
  "lineno": 61,
  "colno": 5
}


隐藏未定义

因为它应该是字符串。加上引号

function hideFull(i){
    document.getElementById("img-cover").style.visibility='hidden';
}

关于javascript - 如何在鼠标悬停时显示图像并在鼠标悬停时隐藏图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40534154/

10-09 18:49