越过背景内容我要制作悬停在表格中的文字，并将其放在白色背景的内容上并展开。我得到了扩展，但我不能得到内容溢出。这里也是我的代码的jsfiddle：JsFiddle 在悬停时，文本会随着背景

.logon-info-head { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
} 
 
.logon-info-head > div, .logon-info > div{ 
 
    display: inline-block; 
 
    width: 10%; 
 
    text-align: center; 
 
} 
 

 
.type{ width: 19%; } 
 
.date-time {width: 20%; } 
 
.country { width: 5%; } 
 
.op-system { width: 18%; } 
 
.browser { width: 12%; } 
 
.ip-address { width: 9%; } 
 

 
.logon .logon-info{ 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 
.op-system, .browser{ 
 
    text-overflow: ellipsis; 
 
    white-space: pre; 
 
    overflow: hidden; 
 
    vertical-align: bottom; 
 
} 
 
.op-system:hover, .browser:hover { 
 
    position: inherit; 
 
    background: white; 
 
    overflow: visible; 
 
    text-align:center; 
 
    padding: 0; 
 
    -webkit-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -o-transition: 1s; 
 
}

<div class="logon"> 
 
    <div class="logon-info-head"> 
 
     <div class="type">Connection type</div> 
 
     <div class="date-time">Connection date and time</div> 
 
     <div class="ip-address">IP address</div> 
 
     <div class="country">Country</div> 
 
     <div class="op-system">Operating system</div> 
 
     <div class="browser">Browser</div> 
 
     <div class="status">Status</div> 
 
    </div> 
 
    <div class="logon-info"> 
 
     <div class="type">Web application user</div> 
 
     <div class="date-time">04.11.2016 13:21:25</div> 
 
     <div class="ip-address">10.195.2.98</div> 
 
     <div class="country">US</div> 
 
     <div class="op-system">Linux Ubuntu</div> 
 
     <div class="browser">Google Chrome</div> 
 
     <div class="status">Failed</div> 
 
    </div> 
 
    <div class="logon-info"> 
 
     <div class="type">Web application user</div> 
 
     <div class="date-time">04.11.2016 13:21:25</div> 
 
     <div class="ip-address">10.195.2.98</div> 
 
     <div class="country">LV</div> 
 
     <div class="op-system">Windows XP Professional x64 Edition</div> 
 
     <div class="browser">Mozilla Firefox</div> 
 
     <div class="status">Success</div> 
 
    </div> 
 
</div>

来源

2016-11-07 Daniels Jirgensons

你能代替使用代码HTML/JS片断这里代替的jsfiddle？ – Neal

你可以看看变换https://jsfiddle.net/8g0kvjx2/3/以允许背景被绘制以及 –

该死的@GCyrillus把这个代码放在答案上，我会接受它。这适用于我:) –

您可以使用变换，以允许太所示背景：

.logon {} .logon .logon-info-head { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
} 
 
.logon .logon-info-head>div, 
 
.logon .logon-info>div { 
 
    display: inline-block; 
 
    width: 10%; 
 
    text-align: center; 
 
} 
 
.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-address, 
 
.logon .logon-info .ip-address { 
 
    width: 9% 
 
} 
 
.logon .logon-info { 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 
.logon .logon-info .op-system, 
 
.logon .logon-info .browser { 
 
    text-overflow: ellipsis; 
 
    white-space: pre; 
 
    overflow: hidden; 
 
    vertical-align: bottom; 
 
} 
 
.logon .logon-info .op-system:hover, 
 
.logon .logon-info .browser:hover { 
 
    background: white; 
 
    font-size: 0.5rem; 
 
    transform: scale(2) translatey(-1em); 
 
    transform-origin: center 0; 
 
    padding: 0; 
 
    -webkit-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -o-transition: 1s; 
 
}

<div class="logon"> 
 

 
    <div class="logon-info-head"> 
 
    <div class="type">Connection type</div> 
 
    <div class="date-time">Connection date and time</div> 
 
    <div class="ip-address">IP address</div> 
 
    <div class="country">Country</div> 
 
    <div class="op-system">Operating system</div> 
 
    <div class="browser">Browser</div> 
 
    <div class="status">Status</div> 
 
    </div> 
 

 
    <div class="logon-info"> 
 
    <div class="type">Web application user</div> 
 
    <div class="date-time">04.11.2016 13:21:25</div> 
 
    <div class="ip-address">10.195.2.98</div> 
 
    <div class="country">US</div> 
 
    <div class="op-system">Linux Ubuntu</div> 
 
    <div class="browser">Google Chrome</div> 
 
    <div class="status">Failed</div> 
 
    </div> 
 

 
    <div class="logon-info"> 
 
    <div class="type">Web application user</div> 
 
    <div class="date-time">04.11.2016 13:21:25</div> 
 
    <div class="ip-address">10.195.2.98</div> 
 
    <div class="country">LV</div> 
 
    <div class="op-system">Windows XP Professional x64 Edition</div> 
 
    <div class="browser">Mozilla Firefox</div> 
 
    <div class="status">Success</div> 
 
    </div> 
 

 
</div>

https://jsfiddle.net/8g0kvjx2/3/

来源

2016-11-07 15:36:36

您可以使用white-space: pre-wrap;上:hover显示整个文本。这将帮助您溢出内容并显示内容。

这里是更新Fiddle

编辑

或者，如果你不想改变行的高度，你需要在悬停width: auto;。

就像：

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

希望这有助于！

来源

2016-11-07 15:07:44

但它改变行的高度 –

@DanielsJirgensons您需要使宽度自动，让溢出背景的白色根据实际文本的宽度。看看我更新的答案！ –

你可以尝试使用：之前用的div细胞的div伪元素有一个额外的自定义属性tooltip="cell content"，并使用：before：hover加上一点点弥补CSS来显示全文工具提示的不透明度。

这是你的代码，改变做你的愿望。

.logon{} 
 

 
.logon .logon-info-head{ 
 
    width: 100%; 
 
    padding: 10px 0; 
 
} 
 

 
.logon .logon-info-head>div, .logon .logon-info>div{ 
 
    display: inline-block; 
 
    width: 10%; 
 
    text-align: center; 
 
} 
 

 
.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-address, .logon .logon-info .ip-address{width: 9%} 
 

 
.logon .logon-info{width: 100%;padding: 5px 0;} 
 

 
.logon .logon-info .op-system, 
 
.logon .logon-info .browser{ 
 
    text-overflow: ellipsis; 
 
    white-space: pre; 
 
    overflow: hidden; 
 
    vertical-align: bottom; 
 
} 
 

 
.logon .logon-info .op-system[tooltip]:before, 
 
.logon .logon-info .browser[tooltip]:before{ 
 
    position : absolute; 
 
    content : attr(tooltip); 
 
    opacity : 0; 
 
    background: white; 
 
    box-shadow: 0px 0px 15px #888888; 
 
    padding:5px; 
 
    } 
 

 
.logon .logon-info .op-system[tooltip]:hover:before, 
 
.logon .logon-info .browser[tooltip]:hover:before{ 
 
    opacity : 1; 
 
}

<div class="logon"> 
 

 
\t \t \t \t <div class="logon-info-head"> 
 
\t \t \t \t \t <div class="type">Connection type</div> 
 
\t \t \t \t \t <div class="date-time">Connection date and time</div> 
 
\t \t \t \t \t <div class="ip-address">IP address</div> 
 
\t \t \t \t \t <div class="country">Country</div> 
 
\t \t \t \t \t <div class="op-system">Operating system</div> 
 
\t \t \t \t \t <div class="browser">Browser</div> 
 
\t \t \t \t \t <div class="status">Status</div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="logon-info"> 
 
\t \t \t \t \t <div class="type">Web application user</div> 
 
\t \t \t \t \t <div class="date-time">04.11.2016 13:21:25</div> 
 
\t \t \t \t \t <div class="ip-address">10.195.2.98</div> 
 
\t \t \t \t \t <div class="country">US</div> 
 
\t \t \t \t \t <div class="op-system" tooltip="Linux Ubuntu">Linux Ubuntu</div> 
 
\t \t \t \t \t <div class="browser" tooltip="Google Chrome">Google Chrome</div> 
 
\t \t \t \t \t <div class="status">Failed</div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="logon-info"> 
 
\t \t \t \t \t <div class="type">Web application user</div> 
 
\t \t \t \t \t <div class="date-time">04.11.2016 13:21:25</div> 
 
\t \t \t \t \t <div class="ip-address">10.195.2.98</div> 
 
\t \t \t \t \t <div class="country">LV</div> 
 
\t \t \t \t \t <div class="op-system" tooltip="Windows XP Professional x64 Edition">Windows XP Professional x64 Edition</div> 
 
\t \t \t \t \t <div class="browser" tooltip="Mozilla Firefox">Mozilla Firefox</div> 
 
\t \t \t \t \t <div class="status">Success</div> 
 
\t \t \t \t </div> 
 

 
\t \t \t </div>

来源

2016-11-07 15:38:06

在悬停时，文本会随着背景

回答

编辑

相关问题