Question

我有一点问题我有多个具有相同ID的div，我想要做的是当我将鼠标悬停在div上时它会在高度上扩展。但是我遇到了问题，它会将其下方的其他div推下去。

所以我想到了一个带有jquery的解决方案，如果我可以计算当前元素的位置，当我将鼠标悬停在它上面时，我可以使用这些值并将div更改为position：absolute与这些值。当鼠标离开时回到正常状态。现在的问题是，当我将鼠标悬停在标记上时，它只会计算标记中第一个div的位置。当我将鼠标悬停在其他人身上时，它无法计算。

我不想用不同的Id /类对div进行编号，因为它将是一个自动系统，并添加了新的div等。

也许可以用另一种方式完成？我对jquery很新，所以这就是我想出来的。

墙壁抱歉D：任何帮助表示赞赏！

标记`

<div id="content-element">
        <div class="element-container">
            <div class="top-info">
                <img src="phone-placeholder.png" alt="placeholder" width="65px" height="58px"/>
                <div class="bg-circle"></div>
                <h3>eerste maand</h3>
                <span><h4>&#8364;12.5</h4></span>
                <h3>Daarna</h3>
                <span><h4>&#8364;12.5</h4></span>
            </div>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
        </div>
    </div><!-- end content-element-->   
</div><!-- end content-container -->`

jQuery

$('#content-element').mouseenter(function () {
        var $positionTop =  $(this).children('.element-container').position().top;
        var $positionLeft = $(this).children('.element-container').position().left;
        console.log($positionTop);
        console.log($positionLeft);
});
$('#content-element').mouseleave(function () {
        var $positionTop =  $(this).children('.element-container').position().top;
        var $positionLeft = $(this).children('.element-container').position().left;
        console.log($positionTop);
        console.log($positionLeft);
});

Answer 1

使用CSS并设置position：absolute;在div的

#yourDIVid {

位置：绝对;

}

Answer 2

首先，不应该有多个具有相同ID的块。

但是如果你想选择具有相同id的多个div，你可以使用

$('div#content-element') 
OR
$('body').find('#content-element')

计算具有相同id的多个div位置

2 个答案: