Question

我有一个带有视频大拇指的页面。我想知道我怎么能在拇指图像上显示视频持续时间onmouseover（在图像左下角的黑盒中显示持续时间）并在onmouseout上再次隐藏它？目前您在演示中看到的视频持续时间在任何时候都是可见的，但我想只有当用户将鼠标放在拇指图像上时才能使其可见。如果你们帮我做这个任务，我很高兴。谢谢你。

小提琴演示： 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>

Answer 1

我不明白为什么在这种情况下你需要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;
}

Answer 2

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

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

如何在onmouseover上通过视频拇指显示视频时长？

2 个答案: