如何在鼠标上显示视频持续时间

How to display video duration on onmouseover over video thumbs?

本文关键字：显示 视频 持续时间 鼠标      更新时间：2023-09-26

我得到了一个带有视频拇指的页面。我想知道我如何才能显示视频持续时间onmouseover (在图像左下角的黑盒中显示持续时间)拇指图像并再次隐藏它onmouseout?目前，你在演示中看到的视频持续时间是可见的，但我想使它可见，只有当用户把鼠标放在拇指图像。如果你们能帮我完成这个任务，我会很高兴。提前谢谢。

demo on fiddle:http://jsfiddle.net/shodaburp/k6yAQ/1/

<div class="ListSlideDown">
    <div class="ListFadeIn">
        <div class="CurrentPage">1</div>
        <div class="IsLastPage">0</div>
        <div class="SortColumn">latest</div>
        <div class="Item ItemLeft">
            <div class="Clipping">
                <a class="ImageLink" href="/videos/vid1" title="video1">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 1" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid1"><span class="Text">51:57</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid1" title="video 1">video 1</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 604</div>
        </div>
        <div class="Item ItemMiddle">
            <div class="Clipping">
                <a class="ImageLink" href="/videos/vid2" title="video2">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 2" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid2"><span class="Text">12:23</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid2" title="video 2">video 2</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 7531</div>
        </div>
        <div class="Item ItemRight">
            <div class="Clipping">
                <a class="ImageLink" href="/videos/vid3" title="video3‌">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video3‌" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid3"><span class="Text">17:36</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid3" title="video 3‌">video 3‌</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 996</div>
        </div>
        <div class="LineSpacer3"></div>
        <div class="Item ItemLeft">
            <div class="Clipping">
                <a class="ImageLink" href="/videos/vid4" title="video4">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 4" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid4"><span class="Text">31:57</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid4" title="video 4">video 4</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 604</div>
        </div>
        <div class="Item ItemMiddle">
            <div class="Clipping">
                <a class="ImageLink" href="/video/video5" title="video5">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 5" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid5"><span class="Text">2:23</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid2" title="video 5">video 5</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 2531</div>
        </div>
        <div class="Item ItemRight">
            <div class="Clipping">
                <a class="ImageLink" href="/videos/vid6" title="video6‌">
                    <img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video6‌" />
                    <img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
                </a>
                <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid6"><span class="Text">12:36</span>
                </a>
            </div>
            <div class="Title">
                <a href="/videos/vid6" title="video 6‌">video 6‌</a>
            </div>
            <div class="VideoAge">1 day before</div>
            <div class="PlaysInfo">broadcast: 196</div>
        </div>
        <div class="LineSpacer3"></div>
        <div class="BottomFix"></div>
    </div>
</div>

我不明白为什么在这种情况下你需要JavaScript:

http://jsfiddle.net/DerekL/habb9/

使用CSS:

.Clipping{                     /*<--Change to .Clipping*/
    position: relative;
}
.DurationInfo{
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: none;
}
.Item:hover .DurationInfo{
        display: block;
}

你甚至可以添加一个漂亮的过渡:

http://jsfiddle.net/DerekL/habb9/2/

.DurationInfo{
    opacity: 0;
    right: -5px;
    transition: opacity .2s ease-in-out,     /*Prefix not included*/
                right .2s ease-in-out;
}
.Item:hover .DurationInfo{
        right: -5px;
        opacity: 1;
}

如果你想使用jquery，你可以使用hover和mouseleave方法。

http://jsfiddle.net/btevfik/k6yAQ/4/

相关文章：