Question

当用户将鼠标悬停在特定图像上时，我需要使页面显示特定文本，并且该文本与每个图像都不同。这是头部的代码：

<head>
  <title>Indian Spices Page</title>
  <link rel="stylesheet" type="text/css" href="..\CSS\cookingStyles.css">
  <script>
    function displayChilli() {
      document.getElementById("chilli").style.display = "block";
      document.getElementById("cumin").style.display = "none";
      document.getElementById("cinnamon").style.display = "none";
      document.getElementById("cloves").style.display = "none";
      document.getElementById("fenugreek").style.display = "none";
      document.getElementById("cardamom").style.display = "none";
      document.getElementById("mustard").style.display = "none";
      document.getElementById("nutmeg").style.display = "none";
    }

    function displayCumin() {
      document.getElementById("chilli").style.display = "none";
      document.getElementById("cumin").style.display = "block";
      document.getElementById("cinnamon").style.display = "none";
      document.getElementById("cloves").style.display = "none";
      document.getElementById("fenugreek").style.display = "none";
      document.getElementById("cardamom").style.display = "none";
      document.getElementById("mustard").style.display = "none";
      document.getElementById("nutmeg").style.display = "none";
    }

    function displayCinnamon() {
      document.getElementById("chilli").style.display = "none";
      document.getElementById("cumin").style.display = "none";
      document.getElementById("cinnamon").style.display = "block";
      document.getElementById("cloves").style.display = "none";
      document.getElementById("fenugreek").style.display = "none";
      document.getElementById("cardamom").style.display = "none";
      document.getElementById("mustard").style.display = "none";
      document.getElementById("nutmeg").style.display = "none";
    }
  </script>
</head>

这是要激活功能的代码：

<div>
  <img class="Spices" src="../Images/chilliPowder.jpg" onMouseOver="displayChilli()">
  <img class="Spices" src="../Images/cumin.jpg" onMouseOver="displayCumin()">
  <img class="Spices" src="../Images/cinnamon.jpg" onMouseOver="displayCinnamon()">
  <img class="Spices" src="../Images/cloves.jpg">
  <img class="Spices" src="../Images/fenugreek.jpg">
  <img class="Spices" src="../Images/cardamom.jpg">
  <img class="Spices" src="../Images/mustardSeeds.jpg">
  <img class="Spices" src="../Images/nutmeg.jpg">
</div>
<section id="chlli" style="display:block">
  <h2>Chili Powder</h2>
  <p>
    <b>History</b>
    <br> Chili peppers originated in Mexico. Following the Columbian Exchange, many cultivars of chili pepper spread across the world.
  </p>

  <p>
    <b>Uses</b>
    <br> Chili peppers are widely used in many cuisines to add spiciness to dishes. The substances that give chili peppers their intensity when ingested or applied topically are capsaicin and related compounds known as capsaicinoids.
  </p>
</section>

<section id="cumin" style="display:none">
  <h2>Cumin</h2>
  <p>
    <b>History</b>
    <br> Thought to originate around the Eastern Mediterranean, cumin has been in use as a spice for thousands of years with seeds excavated at archaeological sites dated to the second millennium BC.
  </p>

  <p>
    <b>Uses</b>
    <br> Cumin can be used ground or as whole seeds. It has an earthy, warming and aromatic character making it a staple in stews, soups and spiced gravies such as curry and chili. It is also used as an ingredient in some pickles.
  </p>
</section>

<section id="cinnamon" style="display:none">
  <h2>Cinnamon</h2>
  <p>
    <b>History</b>
    <br> Cinnamon was imported to Egypt as early as 2000 BC. It was so highly prized among ancient nations that it was regarded as a gift fit for monarchs. Although its source was kept a closely guarded secret in the Mediterranean world for centuries,
    by those in the spice trade to protect their monopoly as suppliers, cinnamon is native to India, Sri Lanka, Bangladesh, and Myanmar.
  </p>

  <p>
    <b>Uses</b>
    <br> Cinnamon is used mainly as an aromatic condiment and flavouring additive in a wide variety of cuisines, sweet and savoury dishes.
  </p>
</section>

我正在从前面的示例中进行工作，该示例在结构上与我的代码没有什么不同。怎么了？

Answer 1

<head>
  <title>Indian Spices Page</title>
  <link rel="stylesheet" type="text/css" href="..\CSS\cookingStyles.css">
  
</head>

<div>
  <img class="Spices" src="../Images/chilliPowder.jpg" onMouseOver="displayChilli()">
  <img class="Spices" src="../Images/cumin.jpg" onMouseOver="displayCumin()">
  <img class="Spices" src="../Images/cinnamon.jpg" onMouseOver="displayCinnamon()">
</div>
<section id="chilli" style="display:none">
  <h2>Chili Powder</h2>
  <p>
    <b>History</b>
    <br> Chili peppers originated in Mexico. Following the Columbian Exchange, many cultivars of chili pepper spread across the world.
  </p>

  <p>
    <b>Uses</b>
    <br> Chili peppers are widely used in many cuisines to add spiciness to dishes. The substances that give chili peppers their intensity when ingested or applied topically are capsaicin and related compounds known as capsaicinoids.
  </p>
</section>

<section id="cumin" style="display:none">
  <h2>Cumin</h2>
  <p>
    <b>History</b>
    <br> Thought to originate around the Eastern Mediterranean, cumin has been in use as a spice for thousands of years with seeds excavated at archaeological sites dated to the second millennium BC.
  </p>

  <p>
    <b>Uses</b>
    <br> Cumin can be used ground or as whole seeds. It has an earthy, warming and aromatic character making it a staple in stews, soups and spiced gravies such as curry and chili. It is also used as an ingredient in some pickles.
  </p>
</section>

<section id="cinnamon" style="display:none">
  <h2>Cinnamon</h2>
  <p>
    <b>History</b>
    <br> Cinnamon was imported to Egypt as early as 2000 BC. It was so highly prized among ancient nations that it was regarded as a gift fit for monarchs. Although its source was kept a closely guarded secret in the Mediterranean world for centuries,
    by those in the spice trade to protect their monopoly as suppliers, cinnamon is native to India, Sri Lanka, Bangladesh, and Myanmar.
  </p>

  <p>
    <b>Uses</b>
    <br> Cinnamon is used mainly as an aromatic condiment and flavouring additive in a wide variety of cuisines, sweet and savoury dishes.
  </p>
</section>

<script>
    function displayChilli() {
      document.getElementById("chilli").style.display = "block";
      document.getElementById("cumin").style.display = "none";
      document.getElementById("cinnamon").style.display = "none";
     
    }

    function displayCumin() {
      document.getElementById("chilli").style.display = "none";
      document.getElementById("cumin").style.display = "block";
      document.getElementById("cinnamon").style.display = "none";
     
    }

    function displayCinnamon() {
      document.getElementById("chilli").style.display = "none";
      document.getElementById("cumin").style.display = "none";
      document.getElementById("cinnamon").style.display = "block";
     
    }
  </script>

由于JavaScript编译时未呈现元素，因此无法绑定用函数编写的元素。因此，Add或Load脚本位于正文之后，位于</body>上方 chilli

的拼写错误

Answer 2

整个问题是我拼写了“ chilli”。解决我的拼写问题就解决了这个问题。

OnMouseOver无法激活头中定义的功能

2 个答案: