鼠标输出图像隐藏包含文本的div

Question

我有以下脚本，用于在单击图像时显示/隐藏一些文本。当单击另一个图像时，此文本将被替换，依此类推。目前，总是有一些文本可见。我希望这个文本消失(或者显示并且空div?)在图像的mouseOut上。这是我目前所拥有的：

JS：

<script type="text/javascript" language="JavaScript">
<!--
function showonlyonev2(thechosenone) {
    var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
          name = newboxes[x].getAttribute("name");
          if (name == 'textboxes') {
              if (newboxes[x].id == thechosenone) {
                  if (newboxes[x].style.display == 'block') {

                  } else {
                      newboxes[x].style.display = 'block';
                  }
              } else {
                  newboxes[x].style.display = 'none';
              }
          }
    }
}
</script>

HTML：

<div id="text-container">
  <div id="text1" name="textboxes">
  <p>Some text here about person 1</p>
  <div id="text2" name="textboxes">
  <p>Some text here about person 2</p>
  <div id="text3" name="textboxes">
  <p>Some text here about person 3</p>
  <div id="text4" name="textboxes">
  <p>Some text here about person 4</p>
</div>


<div class="people-images">
  <a href="javascript:showonlyonev2('text1');" class="rollovers">
    <div id="person1-rollover"><img src="images/people/person1.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text2');" class="rollovers">
    <div id="person2-rollover"><img src="images/people/person2.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text3');" class="rollovers">
    <div id="person3-rollover"><img src="images/people/person3.jpg" alt="" /> </div>
  </a>
</div>
<div class="people-images">
  <a href="javascript:showonlyonev2('text4');" class="rollovers">
    <div id="person4-rollover"><img src="images/people/person4.jpg" alt="" /> </div>
  </a>
</div>

CSS：

#text1 { 
width: 300px;
height: 300px;
background: #c2bfba;
}
#text2, #text3, #text4 { 
width: 300px;
height: 300px;
background: #c2bfba;
display:none; 
}

谢谢你的帮助。

Answer 1

您可以在image标记中使用以下内容：

   <img src='...' onmouseover='javascript:showonlyonev2('text1')' onmouseout='javascript:showonlyonev2('blank')' />

这样，只要图像悬停在上面，就会调用您的函数。你可以创建一个空的div，叫做“空白”，这样你的函数就可以在鼠标离开时使用它，这样它就会显示为空白。

保持你的Javascript不变。

将HTML更改为：

<div id="text-container">
<!-- All of these DIV's should have closing tags -->
<div id="text1" name="textboxes"><p>Some text here about person 1</p></div>
<div id="text2" name="textboxes"><p>Some text here about person 2</p></div>
<div id="text3" name="textboxes"><p>Some text here about person 3</p></div>
<div id="text4" name="textboxes"><p>Some text here about person 4</p></div>
<div id="blank" name="textboxes"><p>&nbsp;</p></div>
</div>


<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg"  onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>

将CSS更改为：

#blank { 
width: 300px;
height: 300px;
background: #c2bfba;
}
#text1, #text2, #text3, #text4 { 
width: 300px;
height: 300px;
background: #c2bfba;
display:none; 
}

如果这对你有效，请让我知道。