鼠标悬停时如何使文字浮过列？

Question

当我将鼠标移到它上面时，我希望让一些文本浮动在列边缘上，就像我的IDE一样：

Here's what I've got so far

如果我将元素定位更改为absolute但是它不会“占用任何空间”，我可以让它漂浮在边缘上。

另外，我不介意在浮动位周围设置边框。

任何人都有任何想法如何实现这一目标？

Answer 1

我找到了两种方法来支持这一点。第一个要求你在每个li里面添加span标签，但它似乎适用于所有浏览器。第二个与标记完全一样，但在chrome和safari中不起作用。

所有浏览器：

http://jsfiddle.net/vkBqg/1/

这个解决方案非常简单，基本上归结为：

li {
   white-space: nowrap;
   overflow-x: hidden;
   width: 150px;
}

li:hover {
    overflow-x: visible;
}

所有基于webkit的浏览器（chrome，safari）：

http://jsfiddle.net/aeARH/1/

这很黑客，要求你改变li的宽度和显示类型，然后强制它断线。 li：hover看起来像这样：

overflow-x: auto;
width:auto;
content:"\A";
display:inline;

这两者的消失应该是位置：当你试图保持元素之间的自然顺序时，绝对不能很好地工作。

Answer 2

我已经有了它，并提出了一个不需要任何标记更改的解决方案，我已经做了一些测试，它似乎可以在 Chrome 26 中工作，< strong> Safari 5.1.7 ， Firefox 20 ， IE10 ， IE9模式下IE10 和IE8模式下 IE10 < / strong>，在所有这些浏览器和浏览器模式下看起来都一样，在IE7模式下使用 IE10 时会开始中断。

看起来像这样：

基本上我所做的是在float:left上设置li，然后在width:auto设置li:hover，这可以确保文本浮动在列边缘上。

然后添加边框，我在li之后直接渲染一个伪元素，它继承了前面li的宽度。然后我设置了它的边界，边距，高度和线高，以将这个伪元素放在前面li的顶部。我已将margin-left设置为150px，以确保它仅显示在超出列宽度的li后面。

要在右侧添加一些空格，我已将white-space: no-wrap更改为white-space: pre，这将在li内保留一些额外的空白区域（如果已添加，则不是要求，我确实添加它使它看起来更漂亮一点。）

这是jsFiddle。

这是HTML：

<div>
  <ul>
    <li>some really long text </li>
    <li>some text that doesn't fit into the column width </li>
    <li>yeah dude, this is sample text </li>
    <li>woot woot! double rainbows </li>
  </ul>
</div>

这是CSS：

li {
  white-space: pre;
  overflow-x: hidden;
  background-color: #f2f2f2;
  line-height: 21px;
  width: 150px;
  float: left;
  clear: both;
}
li:hover:after {
  content:'';
  height: 19px;
  margin: -21px 0px 0px 150px;
  border-width: 1px 1px 1px 0px;
  border-style: solid;
  display: block;
}
li:hover {
  width: auto;
}
div {
  width:155px;
  border-right: 3px solid;
  background-color: #f2f2f2;
}
ul:before, ul:after {
  content:' ';
  display: table;
}
ul {
  list-style: none;
  padding: 5px 0 5px 5px;
  margin: 0;
}
ul:after {
  clear: both;
}
body {
  margin: 0;
  padding: 0;
}

<强>更新

我在div上加了Micro clearfix hack，现在根据内容调整高度，而不是高度固定。

更新2

滚动的问题是，当在子元素上设置width:auto时，包含元素的宽度实际上正在改变，因为滚动条在右侧，它一直在移动。我尝试过使用额外的包装器div，但似乎无法在创建滚动条的元素内的任何位置浮动滚动条的顶部。我可以滚动的唯一方法是在overflow:hidden上设置ul，然后使用jQuery ScrollTo插件在ul内向上和向下滚动。

Example jsFiddle with scrolling