mousover mouseout这个类可见隐藏纯javascript

Question

每个文本都属于一个特定的图像，所以当有人移动光标在该图像。文本应该显示出来，当光标移出鼠标时，文本应该被隐藏。请不要使用jQuerty，必须使用纯JavaScript。任何人都知道我应该如何解决这个问题。

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

 
function hide() { 
 
\t 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>