Question

我在恢复此代码时出现问题，该代码会在悬停时用视频替换图像。在结束时，我希望它回到原始图像。

我尝试过很多东西，但似乎无法正常工作？

$("#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8, #video9, #video10, #video11, #video12, #video13, #video14, #video15, #video16, #video17, #video18, #video19, #video20 ").hover(function () 
{video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);

});

HTML：

<article>

            <div class="img-video">
            <img src="images/thumb-theme.jpg" id="video1" alt="thumb" width="797" height="385" data-video="linktovideo.mp4">
            </div>

            <aside>
            <div class="title">
            <h3><a href="alink">Wording</a></h3>
            <div class="price">$14</div>
            </div>
            <p>Wording

检查出来

Answer 1

var content = '';

$("#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8, #video9, #video10, #video11, #video12, #video13, #video14, #video15, #video16, #video17, #video18, #video19, #video20 ").hover(function () {
    video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    content = $(this).html();
    $(this).replaceWith(video);

}, function() {
        $(this).html(content);
    });

Answer 2

我会尝试使用切换而不是替换。像这样的东西

$(".panel1, .panel2, .panel3").hover(function () 
{
    $(this).children().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel1">
  <p>Original 1</p>
  <p style="display: none">Video 1</p>
</div>
<div class="panel2">
  <p>Original 2</p>
  <p style="display: none">Video 2</p>
</div>
<div class="panel3">
  <p>Original 3</p>
  <p style="display: none">Video 3</p>
</div>

使用替换后恢复div，将其悬停在外面

2 个答案: