javascript onmouseover/onmouseout 停留在上一个内容直到悬停/触发下一个

Question

我是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>

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

如何编写 javascript 使其停留在当前 <section> 并且仅在将鼠标悬停在其他单元格上时加载另一个 <section>？

提前致谢

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

Answer 1

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

"When I show another item, I want to hide other items that may or may not be shown."

因此，让我们删除隐藏元素的 onmouseout 并强制进入 "reset" 状态，以确保每当我们显示 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>

这是一个有效的 fiddle：http://jsfiddle.net/rgthree/63L72trx/12/

javascript onmouseover/onmouseout 停留在上一个内容直到悬停/触发下一个

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

html

javascript

onmouseover

onmouseout