2

外スパンを長い内スパンの幅にしたい。C は、ホバーするまで非表示にする必要があります。これにより、B が非表示になります。デモを見てボタンをクリックすると、B が C より長くなると壊れることがわかります。サーバー側で文字列の長さを確認し、どちらを左側にするかを選択できますが、文字列によっては壊れます

lllllllll <-- 9 文字
wwww <-- 4 文字は幅が広い

デモのソース

HTML

Test
<span class="A">
    <span class="B">bbbb</span>
    <span class="C">CCCCCCCCC</span>
</span> Test
<button class="btn">Make B bigger</button>

CSS:

.A {
    border: black dotted 1px;
}
.B {
    position:absolute
}
.C {
    visibility:hidden
}
.A:Hover .B {
    visibility:hidden
}
.A:Hover .C {
    visibility:visible
}

JS:

$(".btn").click(function () {
    $(".B").html("LONG WORD HERE");
});
4

2 に答える 2

5

私の以前の解決策は間違っていました。これはより良いです：

http://jsfiddle.net/JZJWM/10/

唯一の欠点は、B と C に固定値を与える必要があることですheight。おそらく改善される可能性がありますが、自分で作業することができます。

于 2013-08-15T14:50:42.357 に答える
1

jQueryを使用して幅を操作するソリューションを見つけました。

多くのものが変更されています。

新しい CSS:

.A {
    display: inline-block;
    border: black dotted 1px;
}

.B, .C { position:absolute; }

.C { visibility:hidden }

.A:Hover .B { visibility:hidden }
.A:Hover .C { visibility:visible }

新しい HTML (注意してください&nbsp;- A を縦に伸ばします)

<span class="A"><span class="B">bbbb</span><span class="C">CCCCCCCCC</span>&nbsp;</span>

そして最後に JS:

$(document).ready(function(){
    $(".A").css("width", Math.max($(".B").outerWidth(), $(".C").outerWidth()));
});

$(".btn").click(function () {
    $(".B").html("LONG WORD HERE");
    $(".A").css("width", Math.max($(".B").outerWidth(), $(".C").outerWidth()));
});

これがすべてfiddleです。

于 2013-08-15T14:55:57.630 に答える