jQuery來改變圖像和字幕顯示鼠標懸停

下面是我的代碼： jQuery來改變圖像和字幕顯示鼠標懸停

* { 
 
     font-family: Arial; 
 
    } 
 
    .slide-container { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 360px; 
 
    } 
 
    .slide-jumbo { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 300px; 
 
     overflow: hidden; 
 
    } 
 
    .jumbo { 
 
     position: relative; 
 
     display: inline-block; 
 
     width: 500px; 
 
     height: 300px; 
 
     float: left; 
 
    } 
 
    .jumbo img, .thumb img { 
 
     position: absolute; 
 
     left: 0; 
 
    } 
 
    .jumbo img { 
 
     top: 0; 
 
    } 
 
    .thumb img { 
 
     bottom: 0; 
 
    } 
 
    .jumbo-capt, .thumb-capt { 
 
     width: 100%; 
 
     background-color: rgba(0,0,0,0.8); 
 
     position: absolute; 
 
     color: #fff; 
 
     z-index: 100; 
 
     /* -webkit-transition: all 300ms ease-out; 
 
     -moz-transition: all 300ms ease-out; 
 
     -o-transition: all 300ms ease-out; 
 
     -ms-transition: all 300ms ease-out; 
 
     transition: all 300ms ease-out; */ 
 
     left: 0; 
 
     bottom: 0; 
 
    } 
 
    .slide-thumb { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
    } 
 
    .thumb { 
 
     position: relative; 
 
     /*border: solid 1px;*/ 
 
     display: inline-block; 
 
     width: 100px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
     float: left; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
 
    <title></title> 
 
    <script src="js/jquery.min.js"></script> 
 
    <style type="text/css"> 
 
    * { 
 
     font-family: Arial; 
 
    } 
 
    .slide-container { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 360px; 
 
    } 
 
    .slide-jumbo { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 300px; 
 
     overflow: hidden; 
 
    } 
 
    .jumbo { 
 
     position: relative; 
 
     display: inline-block; 
 
     width: 500px; 
 
     height: 300px; 
 
     float: left; 
 
    } 
 
    .jumbo img, .thumb img { 
 
     position: absolute; 
 
     left: 0; 
 
    } 
 
    .jumbo img { 
 
     top: 0; 
 
    } 
 
    .thumb img { 
 
     bottom: 0; 
 
    } 
 
    .jumbo-capt, .thumb-capt { 
 
     width: 100%; 
 
     background-color: rgba(0,0,0,0.8); 
 
     position: absolute; 
 
     color: #fff; 
 
     z-index: 100; 
 
     /* -webkit-transition: all 300ms ease-out; 
 
     -moz-transition: all 300ms ease-out; 
 
     -o-transition: all 300ms ease-out; 
 
     -ms-transition: all 300ms ease-out; 
 
     transition: all 300ms ease-out; */ 
 
     left: 0; 
 
     bottom: 0; 
 
    } 
 
    .slide-thumb { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
    } 
 
    .thumb { 
 
     position: relative; 
 
     /*border: solid 1px;*/ 
 
     display: inline-block; 
 
     width: 100px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
     float: left; 
 
    } 
 

 
    </style> 
 
</head> 
 
<body> 
 

 
<div class="slide-container"> 
 
    <div class="slide-jumbo"> 
 
     <div class="jumbo" data-image="1"> 
 
      <img src="images/2.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 1</h3> 
 
       <p>Summary 1</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="2"> 
 
      <img src="images/3.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 2</h3> 
 
       <p>Summary 2</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="3"> 
 
      <img src="images/9.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 3</h3> 
 
       <p>Summary 3</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="4"> 
 
      <img src="images/7.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 4</h3> 
 
       <p>Summary 4</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="5"> 
 
      <img src="images/9.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 5</h3> 
 
       <p>Summary 5</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="slide-thumb"> 
 
     <div class="thumb" data-image="1"> 
 
      <img src="images/2small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 1 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="2"> 
 
      <img src="images/3small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 2 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="3"> 
 
      <img src="images/9small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 3 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="4"> 
 
      <img src="images/7small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 4 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="5"> 
 
      <img src="images/9small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 5 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

我如何添加任何JS改變圖像，並顯示在鼠標懸停標題嗎？

來源

2014-10-09 Manuputy

試試這個：您可以使用mouseenter事件並使用fadeIn/fadeOut顯示/隱藏圖像。

$(function(){ 
    $('.slide-thumb .thumb').on("mouseenter",function(){ 
     var dataImage = $(this).data('image'); 
     $('.slide-jumbo .jumbo:visible').fadeOut(1000,function(){ 
     $('.slide-jumbo .jumbo[data-image="'+dataImage+'"]').fadeIn(500); 
     }); 
    }); 
});

DEMO

來源

2014-10-09 09:40:47

感謝代表，我會試試:) – Manuputy 2014-10-09 09:42:59

對不起，先生，也許這樣我想這樣的滑塊，當鼠標懸停圖像變化是，HTTP：// WWW .europeantour.com/ 你可以幫我簡單的代碼？（）:(（ – Manuputy 2014-10-09 09:45:57

請檢查更新後的答案和演示鏈接 – 2014-10-09 10:07:45

jQuery來改變圖像和字幕顯示鼠標懸停

回答

相關問題