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)
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;
}
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.