javascript - 如何让 onmouseover 交换事件保持到 onmouseout 直到下一个 onmouseover 事件？

Question

有人可以帮我让 onmoseover 事件保持显示: block 吗？行为，直到我将鼠标悬停在不同的事件上？换句话说，我想保持一个事件可见，直到我将鼠标悬停在另一个事件上。我填写的答案很简单。我刚接触 JavaScript 两天。

CSS

.box {
   width: 900px;
   height: auto;
   margin-top: 20px;
   padding: 0px 0px 15px 0px;
   border: 5px solid black;
   margin-left: auto;
   margin-right:auto;

}

HTML

<div class="box" style='width:400px; height:auto;>

<p style="display:inline;" 
     onmouseover="document.getElementById('sometext1').style.display = 'block';" 
     onMouseOut="document.getElementById('sometext1').style.display = 'none';">
<span>some text1</span></p>

<p style="display:inline;" 
     onmouseover="document.getElementById('sometext2').style.display = 'block';" 
     onMouseOut="document.getElementById('sometext2').style.display = 'none';">
<span>some text2</span></p>

<p style="display:inline;" 
     onmouseover="document.getElementById('sometext3').style.display = 'block';" 
     onMouseOut="document.getElementById('sometext3').style.display = 'none';">
<span>some text3</span></p>



<div id="sometext1" style="display: none;">
  <p>paragraph of content for sometext1</p>
</div>

<div id="sometext2" style="display: none;">
  <p>paragraph of content for sometext2</p>
</div>

<div id="sometext3" style="display: none;">
  <p>paragraph of content for sometext3</p>
</div>

</div> 

Answer 1

第一个 html 必须是这样的:

<div class="box" style='width:400px; height:auto;>

<p id="text1" onmouseover="mouseoverHandler(this.id)" style="display:inline;"><span>some text1</span></p>
<p id="text2" onmouseover="mouseoverHandler(this.id)" style="display:inline;"><span>some text1</span></p>
<p id="text3" onmouseover="mouseoverHandler(this.id)" style="display:inline;"><span>some text1</span></p>

<div id="sometext1" style="display: none;">
  <p>paragraph of content for sometext1</p>
</div>

<div id="sometext2" style="display: none;">
  <p>paragraph of content for sometext2</p>
</div>

<div id="sometext3" style="display: none;">
  <p>paragraph of content for sometext3</p>
</div>

</div> 

在js文件中编写事件监听器的函数:

var previousId = null;
function mouseoverHandler(e){
    if (previousId != e) {
        document.getElementById('some' + e).style.display = 'block';
        if (previousId != null) {
            document.getElementById('some' + previousId).style.display = 'none';
        }
    }
    previousId = e;
}

只需将段落元素视为 div 的标识符并在它们之间建立关系即可。