Question

我发现了悬浮悬停效果，所以如果有人用鼠标悬停在卡片上，它会抬起来。问题是，如果有人越过最后一个元素，它将破坏它下面的线。它始终是每条线的最后一个对象，而且我被困在这里。

<div class="container">
    <div class="col-lg-9 col-lg-offset-3 text-center" >

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model44.jpg">
            </div>
            <div class="model-card-content">
                <p>Alex Libby</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model43.jpg">
            </div>
            <div class="model-card-content">
                <p>Aida Artiles</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model45.jpg">
            </div>
            <div class="model-card-content">
                <p>Alex Zambiazi</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model42.jpg">
            </div>
            <div class="model-card-content">
                <p>Adeola Zimmer</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model8.jpg">
            </div>
            <div class="model-card-content">
                <p>Aki von Glasgow</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

        <div class="model-card">
            <div class="model-card-image">
                <img src="img/models/model1.jpg">
            </div>
            <div class="model-card-content">
                <p>Anja Peric</p>
            </div>
            <div class="model-card-action">
                <a href="#">Pups</a>
            </div>
        </div>

我这里有一个bootply文件中的html和css文件。 bootply

.model-card {
display: inline-block;
position: relative;
margin: 0em 0.7em 1.4em 0.7em;
background-color: #fff;
transition: box-shadow .25s;
width: 15em;
padding:0px;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out;

}

.model-card:hover {
margin-top: 2px;

}

Answer 1

使用transform和translate代替margin来制作动画，并更新transition属性。

所以替换

.model-card:hover {
    margin-top: 2px;
}

与

.model-card:hover {
    transform: translateY(-2px);
}

演示：http://www.bootply.com/jHToqy4fwh

Bumb Up Hover effec，摧毁了elemnt下的线条

1 个答案: