懸停的項目在展開時不會顯示隱藏的元素

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

除了使用JavaScript，您還可以使用純CSS在懸停時顯示/隱藏。

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)