如何在视频缩略图上显示onmouseover上的视频持续时间？

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

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

来源

2013-03-21 user1788736

我不明白为什么你需要的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-21 07:26:17

由于德里克我试图用我的演示（其中有6周的div）样本数据解决方案它显示的时间在外面拇指在播出时间右下侧！此外，现在它显示了超过3拇指连续，但我想连续3拇指！ – user1788736 2013-03-21 07:33:07

@ user1788736 - 好的，我现在看到了问题。查看我的更新。只要改变'.Item {'到'.Clipping {'。 [演示（示例）]（http://jsfiddle.net/DerekL/k6yAQ/3/） – 2013-03-21 07:36:17

@ user1788736 - 我也看到你[尝试制作某些东西]（http://stackoverflow.com/users/1788736/user1788736？tab = questions）就像显示视频缩略图的页面一样？在请求答案之前先尝试自己尝试一下，因为有时候人们可能会因为这个原因而低估了你的问题。 – 2013-03-21 07:43:08

以防万一你想用jQuery做的，你可以使用hover和mouseleave方法。

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

来源

2013-03-21 07:47:55 btevfik

如何在视频缩略图上显示onmouseover上的视频持续时间？

回答

相关问题