Function 使用 Javascript 在鼠標懸停時顯示 div 或在鼠標懸停時將 div 隱藏到 forEach 中

Question

我想制作一個 function 以在鼠標懸停時顯示div id="capa-video"並播放視頻並在鼠標懸停時隱藏<div id="capa-imagem">並暫停視頻。 你可以看到下面的代碼

<div class="thumbnailBig"> 
  <a href="#" title="text" class="link">
    <div id="capa-imagem"> 
        <img src="<?php echo $thumbnail_src[0]; ?>" alt="<?php the_title(); ?>" />      
    </div>
    
    <div id="capa-video">
        <video preload="none" muted id="video-tocar"> 
            <source src="<?= $mostrar_preview ?>" type="video/mp4">                 
        </video>
    </div> 
</a> </div>

下面的代碼是 php 中的 forEach function

<?php echo $thumbnail_src[0]; ?>
<?= $mostrar_preview ?>

我的 javacript 代碼是

var mostrar = document.getElementsByTagName("thumbnailBig");
[].forEach.call(mostrar, function(item){
item.addEventListener('mouseover', hoverMostrar, false);
item.addEventListener('mouseout', hideMostrar, false);
});

function hoverMostrar(e){
document.getElementById("capa-video").style.display = "block";
document.getElementById("capa-imagem").style.display = "none";  
}

function hideMostrar(e){
document.getElementById("capa-video").style.display = "none";
document.getElementById("capa-imagem").style.display = "block";  
}

var vid = document.getElementsByTagName("video");  
[].forEach.call(vid, function(item){
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);    
});

function hoverVideo(e){
 this.play();    
}

function hideVideo(e){
  this.pause();    
}

我的代碼可以在鼠標懸停時播放視頻並在鼠標懸停時暫停視頻，但我無法在顯示或隱藏div id="capa-imagem"到<div id="capa-video">之間切換。 我怎樣才能做到這一點？

Answer 1

簡單的修復。 不要將事件偵聽器傳遞給命名回調，而是傳遞匿名回調聲明並調用您的兩個處理程序。

item.addEventListener('mouseover', function() {
    hoverVideo();
    hoverMostar();
});

Answer 2

您正在復制元素capa-imagem和capa-video的 ID，將其更改為 class，因此訪問它們不會有問題。

另一個錯誤是您正在嘗試使用document.getElementsByTagName("thumbnailBig");獲取容器。 ，但這是容器 class 名稱。 請改用querySelectorAll() 。

然后，使用NodeList.forEach()循環項目以添加事件偵聽器。 我已經注釋了每個代碼塊，所以你可以知道它是如何工作的。 如果您有任何疑問，請隨時詢問。

 // Get all containers by its class name let thumbs = document.querySelectorAll('.thumbnailBig'); // Get all videos by its tag name let videos = document.querySelectorAll('video'); // Add event listeners for containers thumbs.forEach(thumb => { thumb.addEventListener('mouseover', hoverMostrar); thumb.addEventListener('mouseout', hideMostrar); }); function hoverMostrar(e) { // e is the fired event, "this" is not available here, it refers to window // e.target is the element that fires the event // closest() will find parent, if not, will return same element let thumb = e.target.closest('.thumbnailBig'); // From parent, search for image and video containers to show or hide thumb.querySelector('.capa-imagem').style.display = 'none'; thumb.querySelector('.capa-video').style.display = 'block'; } function hideMostrar(e) { let thumb = e.target.closest('.thumbnailBig'); thumb.querySelector('.capa-imagem').style.display = 'block'; thumb.querySelector('.capa-video').style.display = 'none'; } // Add listeners for video videos.forEach(video => { // e.target is the video that fired the event video.addEventListener('mouseover', e => e.target.play()); video.addEventListener('mouseout', e => e.target.pause()); });

 .thumbnailBig img { max-width:100px; max-height:100px; }.capa-imagen { display: block; }.capa-video { display:none; }

 <div class="thumbnailBig"> <a href="#" title="text" class="link"> <div class="capa-imagem"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="airplane" /> </div> <div class="capa-video"> <video preload="none" muted id="video-tocar"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="thumbnailBig"> <a href="#" title="text" class="link"> <div class="capa-imagem"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="airplane" /> </div> <div class="capa-video"> <video preload="none" muted id="video-tocar"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> </video> </div> </a> </div>