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;}

使用opacity而不是display：none更新。

.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)

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

2 个答案: