0

我有一个带有视频拇指的页面。我想知道如何在鼠标悬停时显示视频持续时间（在图像左下角的黑框中显示持续时间）拇指图像并在鼠标悬停时再次隐藏它？目前，正如您在演示中看到的那样，视频持续时间始终可见，但我想让它仅在用户将鼠标放在拇指图像上时才可见。如果你们帮我完成这项任务，我会很高兴。在此先感谢。

小提琴演示：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‌&lt;/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‌&lt;/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>
4

2 回答 2

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;
}
于 2013-03-21T07:26:17.463 回答
0

以防万一您想使用 jquery，您可以使用hover和mouseleave方法。

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

于 2013-03-21T07:47:55.923 回答