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項目在展開時不顯示隱藏元素

回答

相關問題