javascript onmouseover/omouseout停留在前一个内容中，直到悬停/触发下一个内容

javascript onmouseover/onmouseout stay in previous content until hover / trigger the next one

本文关键字：悬停 下一个 一个 停留在 omouseout onmouseover javascript      更新时间：2024-06-28

我是javascript的初学者。对于这个项目，我们不能在这里使用jQuery。我喜欢在右下角有矩形的4个单元格作为缩略图，它们将在悬停时分别触发显示不同的图像。

<div id="resistorContent">
            <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
            <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
            <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
            <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
            <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>
            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')" onmouseout="hideDetailContent('resistorDetail1')"></li>
                <li onmouseover="showDetailContent('resistorDetail2')" onmouseout="hideDetailContent('resistorDetail2')"></li>
                <li onmouseover="showDetailContent('resistorDetail3')" onmouseout="hideDetailContent('resistorDetail3')"></li>
                <li onmouseover="showDetailContent('resistorDetail4')" onmouseout="hideDetailContent('resistorDetail4')"></li>
            </ul>
        </div>
</section>

<script type="text/javascript">
        function showDetailContent(target) {
            document.getElementById(target).style.display = "block";
        }
        function hideDetailContent(target){
            document.getElementById(target).style.display = "none";
        }
    </script>

我想做一些改进，因为这些单元现在依赖于关闭链接的<section>的onmouseout，以便它可以重新加载下一个<section>。如果我将鼠标从单元格移开，它将显示一个空白页面。

如何编写javascript，使其保持在当前<section>，并在悬停在其他单元格上时仅加载其他<section>？

提前感谢

http://jsfiddle.net/63L72trx/10/

让我们把你想做的分解成一个简单的句子：

"当我显示另一个项目时，我想隐藏其他可能显示或不显示的项目。"

因此，让我们移除隐藏元素的onmouseout，并强制执行"重置"状态，以确保每当我们从onmouseover中显示项目时，所有项目都被隐藏。

<div id="resistorContent">
  <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
  <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')"></li>
      <li onmouseover="showDetailContent('resistorDetail2')"></li>
      <li onmouseover="showDetailContent('resistorDetail3')"></li>
      <li onmouseover="showDetailContent('resistorDetail4')"></li>
    </ul>
  </div>
</section>
<script type="text/javascript">
  var children = document.querySelectorAll('#resistorContent > section[id]');
  function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
      child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
  }
</script>

这是一把正在工作的小提琴：http://jsfiddle.net/rgthree/63L72trx/12/

相关文章：