如何通過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事件？

回答

相關問題