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

Question

My goal is to diplay hidden elements in a box that expands when hovered, but it doesn't work. Here's the code what i'm using. I assume it's the problem in the javascript because I have not much knowledge coding with it.

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

Instead of using javascript, you can use pure css to show/hide on hover.

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

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

Updated with opacity instead of display:none.

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

Answer 2

I'm not exactly sure what you want to do, but I tried: http://jsfiddle.net/rooydv4m/1/

You don't need any JavaScript at all, and it's probably better to use CSS.

The reason your JavaScript didn't work is that you used

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

And

document.getElementsByClass('jackpot-add') returns an array of all elements with the class name jackpot-add .

You should have used:

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