如何让onmouseover交换事件一直保持到onmouseout，直到下一个onmousever事件

Question

有人能帮我获得onmoseover事件来保持显示吗：块；行为，直到我主持了一个不同的活动？换言之，我希望保持一个事件可见，直到我打开另一个事件。我填写的答案很简单。我刚接触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的标识符，并在它们之间建立关系。