Question

我正在尝试制作图像，当用户将鼠标悬停在图片上时，标题会向上滑动。我设法使用JQuery中的悬停功能以一种方式工作，但我希望标题从底部向上滑动。

我的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" />
<title>Gallery</title>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
     $('figure.imgHolder img').mouseover(function() {
        $(this).next().slideUp(300);
    });
});
</script> 
</head>
<body>

<figure class="imgHolder" id="batman">
    <img src="images/batman.jpg" />
    <figcaption>Batman</figcaption>
</figure>
<figure class="imgHolder" id="robin">
    <img src="images/robin.jpg" />
    <figcaption>Robin</figcaption>
</figure>
<figure class="imgHolder" id="superman">
    <img src="images/superman.jpg" />
    <figcaption>Superman</figcaption>
</figure>
<figure class="imgHolder" id="wonderwoman">
    <img src="images/wonderwoman.jpg" />
    <figcaption>Wonder Woman</figcaption>
</figure>


</body>
</html>

我的CSS：

.imgHolder {
    position: relative;
    width: 576px;
    height: 365px;
    margin-bottom: 10px;
}
.imgHolder img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.imgHolder figcaption {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
    font-size: 24px;
    width: 556px;
    padding: 10px;  
    display: none;
}

Answer 1

如果我理解你就试试这个。

$(document).ready(function() {
            $('figure.imgHolder img').hover(function() {
                $(this).next().slideToggle(300);
            });
        });

jquery mouseover图像标题幻灯片

1 个答案: