Question

我不久前在网上找到了鼠标悬停效果，但我想稍微改变一下。目前它缩小鼠标悬停，但我想让它放大IN。所以默认状态是拇指的实际尺寸，然后鼠标悬停以它们当前缩小的方式放大它们。

以下是JSfiddle上的CSS / HTML代码：http://jsfiddle.net/k9TbE/5/

HTML：

<div class="thumbs"> <a href="project.html">
        <span class="thumbInfo">Client Name<h4>Project Name</h4></span>
        <img class="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPEOsFC2tci90_yQTxEfD5gXWOBzI3Rz2wIchkmm2VdNBN57RttD4kiUk" alt="" />
    </a>

</div>

CSS：

.thumbs {
    width: 219px;
    height: 170px;
    margin: 0px 10px 10px 0;
    overflow: hidden;
    position: relative;
    float: left;
}
.no-margin {
    margin-right: 0;
}
.thumbs a {
    display: block;
    position: relative;
}
.thumbs a img {
    width: 250px;
    height: 200px;
    top: -10px;
    left: -20px;
    position: relative;
}
.thumbs a span {
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    font-family:'EurostileLT-Demi', Verdana;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0px;
    padding-top: 65px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    z-index: 100;
    display: none;
}
.thumbs a span h4 {
    font-family:'EurostileLT', Verdana;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 18px;
    margin: 0;
}

使用Javascript：

$(document).ready(function () {
    $('.thumbs').mouseenter(function (e) {
        $(this).children('a').children('img').animate({
            height: '170',
            left: '0',
            top: '0',
            width: '219'
        }, 100);
        $(this).children('a').children('span').fadeIn(200);
    }).mouseleave(function (e) {
        $(this).children('a').children('img').animate({
            height: '200',
            left: '-20',
            top: '-10',
            width: '250'
        }, 100);
        $(this).children('a').children('span').fadeOut(200);
    });
});

任何人都可以帮帮我吗？ :-) 我真的很感激。

Answer 1

试试这个：

CSS：

.thumbs a img {
    width: 219px;
    height: 170px;
    position: relative;
}

使用Javascript：

$(document).ready(function () {
    $('.thumbs').mouseenter(function (e) {
        $(this).children('a').children('img').animate({
            height: '200', // Changed this part
            left: '-20',   // *
            top: '-10',    // *
            width: '250'   // *
        }, 100);
        $(this).children('a').children('span').fadeIn(200);
    }).mouseleave(function (e) {
        $(this).children('a').children('img').animate({
            height: '170', // With this part
            left: '0',     // *
            top: '0',      // *
            width: '219'   // *
        }, 100);
        $(this).children('a').children('span').fadeOut(200);
    });
});

我做的是：我更改了CSS的默认<img>设置，以便在开头缩小并更改Javascript，以便放大而不是缩小mouseenter并缩小而不是mouseleave。

JS小提琴：http://jsfiddle.net/k9TbE/6/

从缩小更改鼠标悬停拇指效果以放大

1 个答案: