0

我有一个小问题。
我有多个具有相同 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);
});
4

2 回答 2

1

使用 CSS 并设置 position: absolute; 在 div 上

#yourDIVid {

位置：绝对；

}

于 2012-07-19T12:27:42.520 回答
0

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

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

$('div#content-element') 
OR
$('body').find('#content-element')
于 2012-07-19T13:18:42.997 回答