Question

我试图在这里做的是,为用户设计一个能够设计安全空间的设计页。我向作为清单要素而提及的不同工具的用户群提供线索,以便编辑、移至不同页和其他功能。在屏幕中心,用户正在设计虚拟空间图像。

目前,屏幕中心是水流的图像。我想能够控制清单上的任何部分(不包括“后地”清单要素),使水沉降的形象消失,因为除用户所掌握清单要素外,其他一切都会变黑。

在增加了一些新法典之后,我仍然无法取得我所期望的结果。

任何建议?

这里,我正在与以下各方合作:

我的超文本:

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" href="styledesign.css">
</head>
<body>
  <h1 id="header">Design Mode</h1>
  <img src="./imagesdesign/purplewaterfall.png">
  <ul id="rightlist">
    <li>View </li>
    <li id="blurb">Coping Skills</li>
    <li id="blurb">Notes to Self</li>
  </ul>
  <ul id="leftlist">
    <li>Objects</li>
    <li id="backgroundli">Background</li>
    <li>Sound</li>
  </ul>
  <ul id="bottomlist">
    <li><a href="../homepage/index.html">Sign Out</a></li>
    <li width=10px><a href="../loginpage/login.html">
      Sign in Using Different Username</a></li>
      <li>Save</li>
    </ul>
    <script type="text/javascript" src="scriptdesign.js"></script>

</body>
</html>

我的 Java文:

//change color of list element when hovering over it
//change color of list element back when not hovering over it
//make my background image disappear when hovering over any li element...
//...other than the background li...
//...and reappear once stopped hovering


document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseover", () => {
    document.body.style.background = "black";
    el.style.color = "white";
    //document.querySelector("img").style.display = "none";
  })
});


document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseout", () => {
    document.body.style.background = "pink";
    el.style.color = "black";
    //document.querySelector("img").style.display = "block";
  })
});


//document.getElementById("backgroundli").addEventListener("mouseover", () => {
//    document.querySelector("img").style.display = "block"
//  })
//});

Answer 1

首先,你可以把你重新作出的多数改动归为一对一对一对一对“条码”。我将其分成三场活动听众forEach。

第二,在我清理的法典中,只有几处yn错。页: 1

document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseover", () => {
    //change the color of the body when hovering over any list item
    document.body.style.background = "black"
    //change the color of the hovered list element when hovering over it
    el.style.color = "white"
    //make all images disappear when hovering over any li element
    document.querySelector("img").style.display = "none"
  })
});

document.querySelectorAll("li").forEach(el => {
  el.addEventListener("mouseout", () => {
    //change the color of the body to pink when finished hovering over any list item
    document.body.style.background = "pink"
    //change the color of the hovered list element back to black when finished hovering over it
    el.style.color = "black"
    //make all images reappear when finished hovering over any li element
    document.querySelector("img").style.display = "block"
  })
});

document.getElementById("backgroundli").addEventListener("mouseover", () => {
  //other than the background li...
  document.querySelector("img").style.display = "block"
});

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="styledesign.css">
</head>

<body>
  <h1 id="header">Design Mode</h1>
  <img src="./imagesdesign/purplewaterfall.png">
  <ul id="rightlist">
    <li>View </li>
    <li id="blurb">Coping Skills</li>
    <li id="blurb">Notes to Self</li>
  </ul>
  <ul id="leftlist">
    <li>Objects</li>
    <li id="backgroundli">Background</li>
    <li>Sound</li>
  </ul>
  <ul id="bottomlist">
    <li><a href="../homepage/index.html">Sign Out</a></li>
    <li width=10px><a href="../loginpage/login.html">
      Sign in Using Different Username</a></li>
    <li>Save</li>
  </ul>
</body>
<script type="text/javascript" src="scriptdesign.js"></script>

</html>

我在《 Java本》上增加了一些评论,以描述正在发生什么。让我知道,是否需要进一步澄清。

友情链接