懸停顯示/隱藏圖像標題

Question

建立一個包含圖像的投資組合頁面，並嘗試使用jquery使懸停的標題顯示和滑動，但當我嘗試時，它不適用於我的代碼。代碼如下所示，另外還可以運行一段代碼。

這裏有一個片段

$('.port-img').hover(function() { 
 
    if ($(".caption").is('hidden')) { 
 
    $(this).show('slideUp', 'slow'); 
 
    $(this).hide('slideDown', 'slow'); 
 
    }; 
 
});

.caption { 
 
    width: 400px; 
 
    height: auto; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    z-index: 2; 
 
    transition: all .5s; 
 
    visibility: hidden; 
 
} 
 

 
.image { 
 
    width: 400px; 
 
    height: 400px; 
 
    z-index: 1; 
 
    transition: all .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo"> 
 
    <div class="port-img image"> 
 
    <a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a> 
 
    </div> 
 
    <div class="caption img-caption"> 
 
    <h3>Logo Design, Photoshop</h3> 
 
    </div> 
 
</div>

Answer 1

你可以用另一種方式做到這一點，只使用CSS：

.caption-style-2{ 
 
\t list-style-type: none; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t 
 
} 
 

 
.caption-style-2 li{ 
 
\t float: left; 
 
\t padding: 0px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 

 
.caption-style-2 li:hover .caption{ 
 
\t opacity: 1; 
 
\t transform: translateY(-100px); 
 
\t -webkit-transform:translateY(-100px); 
 
\t -moz-transform:translateY(-100px); 
 
\t -ms-transform:translateY(-100px); 
 
\t -o-transform:translateY(-100px); 
 

 
} 
 

 

 
.caption-style-2 img{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t float: left; 
 
\t z-index: 4; 
 
} 
 

 

 
.caption-style-2 .caption{ 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t opacity: 0; 
 
\t top:300px; 
 
\t -webkit-transition:all 0.15s ease-in-out; 
 
\t -moz-transition:all 0.15s ease-in-out; 
 
\t -o-transition:all 0.15s ease-in-out; 
 
\t -ms-transition:all 0.15s ease-in-out; 
 
\t transition:all 0.15s ease-in-out; 
 

 
} 
 
.caption-style-2 .blur{ 
 
\t background-color: rgba(0,0,0,0.7); 
 
\t height: 300px; 
 
\t width: 400px; 
 
\t z-index: 5; 
 
\t position: absolute; 
 
} 
 

 
.caption-style-2 .caption-text h1{ 
 
\t text-transform: uppercase; 
 
\t font-size: 18px; 
 
} 
 
.caption-style-2 .caption-text{ 
 
\t z-index: 10; 
 
\t color: #fff; 
 
\t position: absolute; 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t text-align: center; 
 
\t top:20px; 
 
}

<ul class="caption-style-2"> 
 
\t <li> 
 
\t \t <img src="http://via.placeholder.com/300x300" alt=""> 
 
\t \t <div class="caption"> 
 
\t \t \t <div class="blur"></div> 
 
\t \t \t <div class="caption-text"> 
 
\t \t \t \t <h1>Amazing Caption</h1> 
 
\t \t \t \t <p>Whatever It Is - Always Awesome</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </li> 
 
</ul>

Answer 2

$('.port-img').hover(function(){ 
 
\t $(".caption").show('slideUp'); 
 
\t $(".caption").hide('slideDown'); 
 
});

.caption { 
 
    width: 400px; 
 
    height: auto; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    z-index: 2; 
 
    transition: all .5s; 
 
    display: none; 
 
} 
 

 

 

 
.image { 
 
    width: 400px; 
 
    height: 400px; 
 
    z-index: 1; 
 
    transition: all .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo"> 
 
\t \t <div class="port-img image"> 
 
\t \t \t <a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a> 
 
\t \t </div> 
 
\t \t <div class="caption img-caption"> 
 
\t \t \t <h3>Logo Design, Photoshop</h3> 
 
\t \t </div> 
 
\t </div>

$(this)意味着$('.port-img')不('.caption')

Answer 3

請看看片段。

$('.port-img').hover(function(){ 
 
    var $caption = $(".caption"); 
 
    if ($caption.is(':hidden')){ 
 
    $caption.slideDown('slow'); 
 
    } else { 
 
    $caption.slideUp('slow'); 
 
    } 
 
});

.caption { 
 
    width: 400px; 
 
    height: auto; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    z-index: 2; 
 
    transition: all .5s; 
 
    display: none; /* default hide */ 
 
} 
 

 

 

 
.image { 
 
    width: 400px; 
 
    height: 400px; 
 
    z-index: 1; 
 
    transition: all .5s; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo"> 
 
\t \t <div class="port-img image"> 
 
\t \t \t <a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a> 
 
\t \t </div> 
 
\t \t <div class="caption img-caption"> 
 
\t \t \t <h3>Logo Design, Photoshop</h3> 
 
\t \t </div> 
 
\t </div>