如何通过onmouseout获取onmouseover swap事件直到下一个onmouseover事件？

是否有人可以帮助我得到onmoseover事件来保持显示：block;行为，直到我已经开始了一个不同的事件？换句话说，我想保持一个事件可见，直到我开始了一个不同的事件。我填写的答案很简单。我是2天新的JavaScript。如何通过onmouseout获取onmouseover swap事件直到下一个onmouseover事件？

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>

来源

2014-09-01 jamnel1

第一个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的标识符并且它们之间有联系。

来源

2014-09-01 01:37:29 PashaB

谢谢PashaB。这个语法比我以前做的更有效率。谢谢。但是，当我将鼠标移出触发事件时，我仍然不确定如何使内容保持可见状态。如果我将鼠标悬停在text1上，即使移动鼠标，我也希望内容保持可见。我希望text1或text2或text3保持可见，直到我将鼠标悬停在不同的text1 text2或text3上。现在内容立即显示：没有人将鼠标从触发器上移开。 – jamnel1 2014-09-01 04:50:00

只需在js文件中设置一个全局变量，然后在mouseoverHandler函数中将其设置为等于e（e是元素id），然后使用if语句检查前一个元素的id。我在回答中编辑了代码。 – PashaB 2014-09-01 14:12:19

我进入Javascript认为它会更困难。我只需要正确地考虑它。我会得到它。你是最好的！！！谢谢。 – jamnel1 2014-09-02 00:29:30

如何通过onmouseout获取onmouseover swap事件直到下一个onmouseover事件？

回答

相关问题