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()));
});

一切尽在掌握之中。

于 2013-08-15T14:55:57.630 回答