javascript - mouseout 图像隐藏包含文本的 div

Question

我有以下脚本，可在单击图像时显示/隐藏一些文本。当单击另一个图像等时，此文本将被替换。目前总有一些文本可见。我希望此文本在图像的 mouseOut 上消失(或者可能显示并清空 div？)。这是我目前拥有的:

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

您可以在图片标签中使用它:

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

这样，只要将鼠标悬停在图像上，就会调用您的函数。您可以创建一个名为“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; 
}

让我知道这是否适合您。