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; 
}

请告诉我这是否适合您。

mouseout图像隐藏包含文本的div

1 个答案: