悬停的项目在展开时不显示隐藏元素

Question

我的目标是显示一个框中隐藏的元素，这个框在悬停时会展开，但它不起作用。这是我使用的代码。我假设这是javascript中的问题，因为我对它的编码没有太多的知识。

HTML：

                    <div class="jackpot-add">
                        <p><img src="img/clan-standard-header.png" class="img-circular-small" alt="user-avatar">text</p>
                        <div id="show-hide">
                        <img src="skins/skin.png" id="border-img" style="width: 100px; height: 100px;">
                        </div>
                    </div>

CSS：

.jackpot-add {
display: block;
background:#538fae;
width: auto;
height: 55px;
padding: 10px; 
border-left: 10px solid #396379;
margin-bottom: 15px;
margin-top: 15px;
transition:height 1.6s; 
-webkit-transition:height 1.6s;
}

.jackpot-add:hover{
height: 300px;
-webkit-transition: height 0.5s;
-moz-transition:  height 0.5s;
-o-transition:  height 0.5s;
-ms-transition:  height 0.5s;
}

 #show-hide{
 visibility: hidden;
 }

Javascript：

 var imageNode = document.getElementById('show-hide')
function MyFuncHover() {

 imageNode.style.visibility = 'visible'
}

function MyFuncOut(event) {

  if (event.target !== imageNode) {
     imageNode.style.visibility= 'hidden'
 }
}

document.getElementsByClass('jackpot-add').addEventListener('mouseover', MyFuncHover, true)
document.getElementsByClass('jackpot-add').addEventListener('mouseout', MyFuncOut, true)

Answer 1

你可以使用纯css在悬停时显示/隐藏，而不是使用javascript。

https://jsfiddle.net/hbkdw8dj/4/

#show-hide {display:none;}
.jackpot-add:hover #show-hide {display:initial;}

使用不透明度而不是显示进行了更新:无。

.jackpot-add:hover .show-hide {
opacity:1;
transition-delay: 0.5s;
}

Answer 2

我不太确定你想做什么，但我试过了：http://jsfiddle.net/rooydv4m/1/

您根本不需要任何JavaScript，并且使用CSS可能更好。

你的JavaScript不工作的原因是你使用了

document.getElementsByClass('jackpot-add').addEventListener('mouseover', MyFuncHover, true)

和

document.getElementsByClass('jackpot-add')返回class名称为jackpot-add的所有元素的数组。

您应该使用：

document.getElementsByClass('jackpot-add')[0].addEventListener('mouseover', MyFuncHover, true)