javascript - mouseover mouseout这个类可见隐藏纯javascript

Question

每个文本都属于一个特定的图像，因此当有人将光标移到该图像上时。文本应该显示，当光标移出鼠标时，文本应该隐藏。不需要 jQuerty，必须是纯 JavaScript。任何人都知道我应该如何解决这个问题。

function show() {
	document.getElementsByClassName("text").style.visibility = "visible";
} 

function hide() {
	document.getElementsByClassName("text").style.visibility = "hidden";
} 

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="www.bbc.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
      <img src="img/a-print-screen.png" class="project" alt="a-print-screen"/>
       <div class="text">A-picture</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="www.cnn.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
      <img src="img/x-picture.png" class="project" alt="x-print-screen"/>
      <div class="text">x-picture</div>
      </a>
    </div>
  </div>
</div>

Answer 1

命令 document.getElementsByClassName("text"); 返回一个元素列表，与 document.getElementById("text"); 相反，后者仅返回一个元素。因此，要使用一个元素更改其样式，您必须使用数组表示法 document.getElementsByClassName("text")[0] 例如第一个元素。

我使用 for 循环来迭代下面代码示例中的每个列表元素:

function show(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "visible";
  }
} 

function hide(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "hidden";
  }
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="www.bbc.com" target="_blank" class="image" >
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" class="project" alt="a-print-screen" onmouseover="show('text1')" onmouseout="hide('text1')"/>
        <div class="text1">A-picture</div>
      </a>
    </div>
  </div>
  
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="www.cnn.com" target="_blank" class="image" >
        <img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg" class="project" alt="x-print-screen" onmouseover="show('text2')" onmouseout="hide('text2')" />
        <div class="text2">x-picture</div>
      </a>
    </div>
  </div>
</div>