Question

我想让外跨度为较长内跨的宽度。应隐藏C直到悬停，然后隐藏B。如果你看Demo并点击按钮，你会看到一旦B长于C就会中断。我可以在服务器端检查字符串长度并选择哪个应该是左侧但是根据字符串

而中断

lllllllll＆lt; - 9个字符
wwww＆lt; - 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");
});

Answer 1

我以前的解决方案是错误的。这个更好：

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

唯一的缺点是你必须给B和C一个固定的height。它可能会有所改进，但你可以自己动手。

Answer 2

我找到了一个使用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（注意  - 它垂直拉伸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 中的所有内容。

内跨越宽的外跨宽度？

2 个答案: