在元素悬停时显示说明

时间：2019-03-18 10:46:15

标签： javascript jquery html css

我连续有几个元素。我只想显示img，当您将鼠标悬停在上面时，说明将显示在下面。它工作正常，但是当显示说明时，整个div会扩展，并且会使行弄乱。我如何将其设置为

  • 始终具有相同的宽度和高度
  • 该文本应仅显示在下面的图片上。

代码如下：

$(document).ready(function() {
    $('.box').hover(function() {
        $(this).find('.details').show(500);
        $(this).addClass('higlighted');
    }, function() {
        $('.details').hide(500);
        $(this).removeClass('higlighted');
    })
});
.products {
    justify-content: center;
}

.products-description {
    padding-top: 50px;
    padding-bottom: 50px;
}

.products-description h1 {
    font-family: 'Homenaje', sans-serif;
    font-size: 50px;
    padding-bottom: 40px;
}

.products-description p {
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    font-size: 22px;
}

.box {
    padding-bottom: 3em;
    padding-top: 3em;
}

.box .details {
    display: none;
    transition: 1s;
}

.box .details p {
    font-size: 14px;
}

.higlighted {
    background: rgba(98, 192, 23);
    position: absolute;
    transition: 1s;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>
    <div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>

3 个答案:

答案 0 :(得分：3)

您可以将.higlighted的宽度设置为.box的宽度：

$(document).ready(function() {
    $('.box').hover(function() {
        $(this).find('.details').show(500);
        $(this).addClass('higlighted');
        var w = $('.box').width();
        $('.higlighted').css({width: `${w}`});
    }, function() {
        $('.details').hide(500);
        $(this).removeClass('higlighted');
    })
});
.products {
    justify-content: center;
}

.products-description {
    padding-top: 50px;
    padding-bottom: 50px;
}

.products-description h1 {
    font-family: 'Homenaje', sans-serif;
    font-size: 50px;
    padding-bottom: 40px;
}

.products-description p {
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    font-size: 22px;
}

.box {
    padding-bottom: 3em;
    padding-top: 3em;
}

.box .details {
    display: none;
    transition: 1s;
}

.box .details p {
    font-size: 14px;
}

.higlighted {
    background: rgba(98, 192, 23);
    position: absolute;
    transition: 1s;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
    <div class="col-lg-1 box" id="box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details" id="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
</div>
<div class="row products">
    <div class="col-lg-1 box" id="box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details" id="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
    <div class="col-lg-1 box">
        <div class="imgBox">
            <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        </div>
    </div>
</div>

答案 1 :(得分：2)

使用css来实现。

.box:hover .details{
    display: block;
        transition: 1s;
}

.box:hover{
    background: rgba(98, 192, 23);
    transition: 1s;
}

让我知道是否需要更改其他内容。谢谢

.products {
    justify-content: center;
}

.products-description {
    padding-top: 50px;
    padding-bottom: 50px;
}

.products-description h1 {
    font-family: 'Homenaje', sans-serif;
    font-size: 50px;
    padding-bottom: 40px;
}

.products-description p {
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    font-size: 22px;
}

.box {
    padding-bottom: 3em;
    padding-top: 3em;
}

.box .details {
    display: none;
    transition: 1s;
}

.box .details p {
    font-size: 14px;
}

.higlighted {
    background: rgba(98, 192, 23);
    position: absolute;
    transition: 1s;
}

.box:hover .details{
    display: block;
        transition: 1s;
}

.box:hover{
    background: rgba(98, 192, 23);
    transition: 1s;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>
    <div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>

答案 2 :(得分：0)

是css属性transition: 1s引起了您的麻烦，因为您同时使用jQuery和hide(500)和show(500)来做到这一点。

如果您使用的是jQuery方式，则只需删除css属性。

由于过渡，高度正在动态调整。如果您不希望这样做，请不要使用过渡或以@Mamun的方式进行操作。

$(document).ready(function() {
    $('.box').hover(function() {
        $(this).find('.details').show(500);
        $(this).addClass('higlighted');
    }, function() {
        $('.details').hide(500);
        $(this).removeClass('higlighted');
    })
});
.products {
    justify-content: center;
}

.products-description {
    padding-top: 50px;
    padding-bottom: 50px;
}

.products-description h1 {
    font-family: 'Homenaje', sans-serif;
    font-size: 50px;
    padding-bottom: 40px;
}

.products-description p {
    font-family: 'Mada', sans-serif;
    font-weight: 300;
    font-size: 22px;
}

.box {
    padding-bottom: 3em;
    padding-top: 3em;
}

.box .details {
    display: none;
}

.box .details p {
    font-size: 14px;
}

.higlighted {
    background: rgba(98, 192, 23);
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>
    <div class="row products">
            <div class="col-lg-1 box" id="box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details" id="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
            <div class="col-lg-1 box">
                <div class="imgBox">
                    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
                <div class="details">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                </div>
            </div>
        </div>

相关问题
最新问题