如何使圖像成爲鼠標上的嵌入式視頻？

Question

因此，今天我學會了如何將鼠標移到另一幅圖像上。

我想知道，但我可以將圖像更改爲YouTube上的鼠標視頻嗎？

Answer 1

當然，你可以替換你想要的任何HTML內容。爲了更容易處理事件處理程序（鼠標懸停在您的案例中），我建議您查看一些現有的Javascript庫，如jQuery。

Answer 2

使用jQuery和一些CSS：

DEMO：http://jsfiddle.net/3SQtS/

<!-- HTML --> 
<div class="replacement"> 
    <img class="top-img" src="http://placekitten.com/560/315" alt="Kitten"> 
    <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ" frameborder="0" allowfullscreen></iframe> 
</div> 

---

/* CSS */ 
.replacement { 
    position: relative; 
} 
.top-img { 
    position: absolute; 
} 

---

// jQuery 
jQuery(document).ready(function($) { 
    $('.replacement .top-img').on('mouseenter', function() { 
     $(this).fadeOut(500); 
    }); 
});