0

少し問題があります。
同じIDの複数のdivがあります。実行したいのは、divにカーソルを合わせると、高さが拡張されます。しかし、問題が発生すると、その下にある他のdivが押し下げられます。

そこで、jqueryを使用した解決策を考えました。現在の要素にカーソルを合わせたときにその位置を計算できれば、それらの値を使用してdivをposition：absoluteに変更できます。マウスが離れると通常の状態に戻ります。問題は、マークアップにカーソルを合わせたときに、マークアップの最初のdivの位置のみを計算するようになったことです。他の人にカーソルを合わせると、計算されません。

新しいdivが追加されるなどの自動システムになるため、異なるID/クラスで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を使用して位置を設定します：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 に答える