Html 悬停时，文本将覆盖背景内容

我想让我的文本，在表格中，悬停在白色背景的内容上并展开。我得到了扩展，但我不能得到内容的溢出。下面是我的代码：

.logon信息头{
宽度：100%；
填充：10px0；
}
.logon info head>div、.logon info>div{
显示：内联块；
宽度：10%；
文本对齐：居中；
}
.type{宽度：19%；}
.日期时间{宽度：20%；}
.国家{宽度：5%；}
.op系统{宽度：18%；}
.browser{宽度：12%；}
.ip地址{宽度：9%；}
.logon.logon信息{
宽度：100%；
填充：5px0；
}
.op系统，.browser{
文本溢出：省略号；
空白：预处理；
溢出：隐藏；
垂直对齐：底部对齐；
}
.op系统：悬停，.浏览器：悬停{
职位：继承；
背景：白色；
溢出：可见；
文本对齐：居中；
填充：0；
-webkit转换：1s；
-moz跃迁：1s；
-o-转变：1s；
}

连接类型
连接日期和时间
IP地址
国家
操作系统
浏览器
地位
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
美国
Linux Ubuntu
谷歌浏览器
失败
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
吕
Windows XP Professional x64版
Mozilla Firefox
成功

您可以使用

空白：预包装打开<代码>：悬停

以显示全文。这将帮助您溢出内容并显示内容

以下是更新后的

编辑 或者，如果不想更改行的高度，则需要使

宽度：自动悬停

就像：

.logon .logon-info .op-system:hover,
.logon .logon-info .browser:hover {
  min-width: 18%;
  width: auto;
}

希望这有帮助
 您也可以使用transform来显示背景：


.logon{}.logon.logon信息头{
宽度：100%；
填充：10px0；
}
.logon.logon信息头>div，
.logon.logon info>div{
显示：内联块；
宽度：10%；
文本对齐：居中；
}
.logon.logon info>div{}.logon.logon info head.type，
.logon.logon info.type{
宽度：19%
}
.logon.logon信息头日期时间，
.logon.logon info.date时间{
宽度：20%
}
.logon.logon信息负责人国家/地区，
.logon.logon info.country{
宽度：5%
}
.logon.logon信息头.op系统，
.logon.logon info.op系统{
宽度：18%
}
.logon.logon信息头.browser，
.logon.logon info.browser{
宽度：12%
}
.logon.logon信息头.ip地址，
.logon.logon info.ip地址{
宽度：9%
}
.logon.logon信息{
宽度：100%；
填充：5px0；
}
.logon.logon info.op系统，
.logon.logon info.browser{
文本溢出：省略号；
空白：预处理；
溢出：隐藏；
垂直对齐：底部对齐；
}
.logon.logon info.op系统：悬停，
.logon.logon info.browser:悬停{
背景：白色；
字体大小：0.5rem；
变换：缩放（2）平移Y（-1米）；
变换原点：中心0；
填充：0；
-webkit转换：1s；
-moz跃迁：1s；
-o-转变：1s；
}

连接类型
连接日期和时间
IP地址
国家
操作系统
浏览器
地位
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
美国
Linux Ubuntu
谷歌浏览器
失败
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
吕
Windows XP Professional x64版
Mozilla Firefox
成功
您可以尝试在单元格div上使用：before伪元素，div具有额外的自定义属性
tooltip=“cell content”
，并在：before:hover上使用不透明度加上一点化妆css来显示全文工具提示

这是您的代码，可以根据需要进行更改


.logon{}
.logon.logon信息头{
宽度：100%；
填充：10px0；
}
.logon.logon info head>div.logon.logon.logon info>div{
显示：内联块；
宽度：10%；
文本对齐：居中；
}
.logon.logon info>div{
}
.logon.logon info head.type、.logon.logon info.type{width:19%}
.logon.logon info head.date time.logon.logon info.date time{width:20%}
.logon.logon info head.country、.logon.logon info.country{width:5%}
.logon.logon info head.op system、.logon.logon info.op system{width:18%}
.logon.logon info head.browser、.logon.logon info.browser{width:12%}
.logon.logon info head.ip地址，.logon.logon info.ip地址{宽度：9%}
.logon.logon信息{宽度：100%；填充：5px 0；}
.logon.logon info.op系统，
.logon.logon info.browser{
文本溢出：省略号；
空白：预处理；
溢出：隐藏；
垂直对齐：底部对齐；
}
.logon.logon info.op系统[工具提示]：在，
.logon.logon info.browser[工具提示]：之前{
位置：绝对位置；
内容：attr（工具提示）；
不透明度：0；
背景：白色；
盒影：0px 0px 15px#8888888；
填充物：5px；
}
.logon.logon info.op系统[工具提示]：悬停：在，
.logon.logon info.browser[工具提示]：悬停：在{
不透明度：1；
}

连接类型
连接日期和时间
IP地址
国家
操作系统
浏览器
地位
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
美国
Linux Ubuntu
谷歌浏览器
失败
Web应用程序用户
04.11.2016 13:21:25
10.195.2.98
吕
Windows XP Professional x64版
Mozilla Firefox
成功
你能在这里用html/js代码片段代替JSFIDLE吗？你可以看看转换，让背景也能画出来该死的@GCyrillus把代码放在答案上，我会接受的。这对我有用：）但它改变了row@DanielsJirgensons您需要使宽度自动，以便根据需要溢出背景的白色