如何在視頻縮略圖上顯示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上的視頻持續時間？

回答

相關問題