我有一個產品的傳送帶，它有1個圖像和1個視頻。圖像顯示正常，但當我試圖按下視頻，所以它彈出到主轉盤視圖，它不工作。我的index.html代碼(我從這個源代碼中省略了實際的視頻鏈接)是:

<div id="content-wrapper">
    

    <div class="column">
        <img id=featured src="images/sample1.jpg">

        <div id="slide-wrapper" >
            

            <div id="slider">
                <img class="thumbnail active" src="images/sample1.jpg">
                <iframe class="thumbnail" width="560" height="315" src="videolink" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>

        </div>
    </div>

    <div class="col-2">
        <p>Home / Sample Item 1</p>
        <h1>Sample Item 1</h1>
        <h4>$00.00</h4>
        <h3>Product Details</h3><br>
        <p>Manufactured in CANADA</p>
    </div>

</div>

在相同的源代碼中，我有一段Javascript代碼:

<script type="text/javascript">
    let thumbnails = document.getElementsByClassName('thumbnail')

    let activeImages = document.getElementsByClassName('active')

    for (var i=0; i < thumbnails.length; i++){

        thumbnails[i].addEventListener('mouseover', function(){
            console.log(activeImages)
            
            if (activeImages.length > 0){
                activeImages[0].classList.remove('active')
            }
            

            this.classList.add('active')
            document.getElementById('featured').src = this.src
        })
    }

</script>

我的CSS代碼:

body{
    padding-top: 100px;
}

#content-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.column{
    width: 600px;
    padding: 10px;

}

#featured{
    max-width: 500px;
    max-height: 600px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid black;

}

.thumbnail{
    object-fit: cover;
    max-width: 180px;
    max-height: 100px;
    cursor: pointer;
    opacity: 0.5;
    margin: 5px;
    border: 2px solid black;

}

.thumbnail:hover{
    opacity:1;
}

.active{
    opacity: 1;
}

#slide-wrapper{
    max-width: 500px;
    display: flex;
    min-height: 100px;
    align-items: center;
}

#slider{
    width: 440px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;

}

#slider::-webkit-scrollbar {
        width: 8px;

}

#slider::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}
 
#slider::-webkit-scrollbar-thumb {
  background-color: #dede2e;
  outline: 1px solid slategrey;
   border-radius: 100px;

}

#slider::-webkit-scrollbar-thumb:hover{
    background-color: #18b5ce;
}

.arrow{
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: .3s;
}

.arrow:hover{
    opacity: .5;
    width: 35px;
    height: 35px;
}

當我懸停在圖像上時——圖像正常，我可以看到它，但當我懸停在嵌入的小視頻上時，它會在主轉盤視圖(縮略圖上方)中顯示一個損壞的圖像標志。我做錯了什么？如何才能讓視頻懸停在上面時正常顯示？

我已經嘗試了一點東西，并通過了許多事情，得到了這個解決方案，你只需改變css和地方 元素，您希望在其中獲得想要的結果。

html:

<div class="container">
      <div class="box">
        <img src="ray-so-export.png">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/cCYObFBEp0k" frameborder="0"
          allowfullscreen></iframe>
      </div>
      <div class="preview"></div>
    </div>

css:

.container {
    display: flex;
    }
    
    .box {
    width: 50%;
    padding: 20px;
    }
    
    .box:hover {
    cursor: pointer;
    }
    
    .preview {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: lightgray;
    }
    
    .box img,
    .box iframe,
    .preview img,
    .preview iframe {
    width: 250px;
    height: 250px;
    object-fit: cover;
    }

javascript:

var box = document.querySelector('.box');
    var preview = document.querySelector('.preview');
    
    box.addEventListener('mouseover', function(event) {
    var target = event.target;
    
    if (target.tagName === 'IMG' || target.tagName === 'IFRAME') {
    var clone = target.cloneNode(true);
    preview.innerHTML = '';
    preview.appendChild(clone);
    }
    });
    
    box.addEventListener('mouseleave', function() {
    preview.innerHTML = '';
    });

你也可以參考我的這支筆。

如果還有什么，請評論