0

順序付けられていないリストがあり、各liにはimgとdivが含まれています。私の目標は、divにカーソルを合わせると、imgが何かを実行するようになることです。今のところ、クラスを追加/削除するだけですが、それはプレースホルダーです。追加/削除は機能しますが、問題ではありません（ただし、それに関するヒントがある場合は、経験豊富な人からの入力をいつでも喜んで受けてください）。

問題は、ホバーされたdivがホバリングすると、突然拡張してli全体を埋め、一時的に上部のパディングを失ったように見えることです。つまり、そのdivが派手なボタンに置​​き換えられると、ボタンは現在のプレーンテキストと同じくらいジャンプする可能性があります。

html：

<ul id="headmenu">
    <li id="kite1">
        <img src="img/kitesani1a.png" id="kites1a" />
        <div id="attend" class="headmenulink">attending</div>
    </li>
</ul>

css：

ul#headmenu { margin: 2em 0 0 0; padding: 0; }
ul#headmenu li { margin: 0 1% 0 0; padding: 0; width: 19%; float: left; display: inline; list-style: none;}
ul#headmenu img { padding-bottom: 5em; position: relative; top: 0; left: 0; z-index: 100; }
li .headmenulink { padding-top: 2em; position: relative; bottom: 0; left: 0; border:1px solid blue; }

ul#headmenu li img {
    transition-duration: 0.8s;
    transition-property: transform;
}

.kite1ahover {
    float: right;
    position: relative;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

（ライブバージョンでは、cssはより冗長です。）最後に、現在のドラフトjQueryビット：

$("#attend").hover(function(){
    $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){
        $(this).removeClass('kite1ahover');
        next();
});

でjsfiddleを実行しましたが、奇妙なエラーが発生します。編集が機能するかどうかはわかりませんが、念のため、 http： //jsfiddle.net/klh02/5UMK5/7/にあります。次に、 http：/で実際の例を削除しました。 /www.karinoyo.com/temp/index.php。ライブバージョン（フィドルではない）を開くと、一時的な青い境界線がホバーすると拡大し、同時にテキストが1〜2行上にジャンプします。（注：「ライブ」ホバーは「出席」li、左から最初のliのみです。）

CSSが原因でdivが拡張されていますか？それともjQueryのせいですか？それとも、これはこのような場合に発生することであり、拡張/ジャンプするのではなく、divを配置したままにするために、クリエイティブなポジショニングを行う必要がありますか？

前もって感謝します！

4

2 に答える 2

1

あなたのフィドルでは、ホバークラスの内部にフロートがあるため、DIVが大きくなります。

.kite1ahover {
    float:right; /* remove this */
    position: relative;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
}​

これはボックスの高さを壊します。削除するとすぐに、DIVは成長を停止します。発生した「奇妙な」エラーは、jQueryコードに閉じ括弧がないことが原因で発生しました。

$(document).ready(function(){
    $("#attend").hover(function(){
        $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){
            $(this).removeClass('kite1ahover');
            next();
        });
    });
// missing brackets here...
});

ここに動作するバリアントがあります。

于 2012-12-26T23:48:12.187 に答える
1

バウンスは、その「kite1ahover」クラスでimgをフロートさせるためです。

要素がフロートすると、要素が占めるサイズは無視され（中空であるかのように）、divがそのボックスの一番上の要素になり、一番上にジャンプします。

floatの使用をやめ、代わりに左、右、上、下の組み合わせを使用すると、imgを好きなように移動できるはずです。

例えば position:relative; left:100px;

于 2012-12-26T23:45:55.817 に答える