Question

我试图让鼠标移出时图像消失。我的图像出现在鼠标上，但我想让它隐藏在鼠标外面。我的当前代码在任何帮助之下？

＆＃13;

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;

}

＆＃13;

<!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>

＆＃13;

Answer 1

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

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';
}

如何在鼠标悬停时显示图像并在鼠标输出上隐藏

1 个答案: