Question

有人可以帮助我获取onmoseover事件来保持显示：block;行为，直到我在一个不同的事件上？换句话说，我想让一个事件可见，直到我在一个不同的事件上。我填写的答案很简单。我刚刚开始使用javascript 2天了。

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的标识符并在它们之间建立关系。

如何让onmouseover交换事件通过onmouseout持续到下一个onmouseover事件？

1 个答案: