javascript - 在元素上悬停显示描述

Question

我有几个连续的元素。我只想显示 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>

Answer 1

可以将.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>