Hovered项目在展开时不显示隐藏元素

我的目标是将隐藏元素展开到展开时展开的框中，但不起作用。这是我使用的代码。我认为这是JavaScript中的问题，因为我没有太多的知识编码。Hovered项目在展开时不显示隐藏元素

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)

来源

2015-08-21 isuckatpython

而不是使用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; 
}

来源

2015-08-21 21:34:38

哦，谢谢！我想我可能会这样做。有一件让我困扰的事情是，当盒子没有完全展开时，图像首先弹出。 – isuckatpython

在这里，试试这个：[jsfiddle]（https://jsfiddle.net/hbkdw8dj/4/）。如果可行，请将答案标为“已回答”:) –

我不清楚自己想做的事，但我想：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)

来源

2015-08-21 21:36:54 DivideByZero

Hovered项目在展开时不显示隐藏元素

回答

相关问题