ホバーでは、テキストが背景のコンテンツに移動します

Question

テーブルにある私のテキストがホバー上の白い背景のコンテンツに行き、拡大するようにしたいと思います。私は展開を得たが、私はコンテンツの上にオーバーフローを取得することはできません。ここに私のコードのJsFiddleもある：あなたは全体のテキストを表示する:hoverにwhite-space: pre-wrap;を使用することができます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>

Answer 1

あなたは背景があまりにも示すことができるように変換を用いることがあります。

.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/

Answer 2

。これにより、コンテンツをオーバーフローさせてコンテンツを表示するのに役立ちます。ここで

が更新Fiddle

編集

それとも、行の高さを変更したくない場合は、あなたがホバーにwidth: auto;を作成する必要があります。

だけのよう：

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

・ホープ、このことができます！

Answer 3

あなたは使用して試すことができます：divタグを持つセルのdiv上の擬似要素の前に追加のカスタム属性tooltip="cell content"を持っていて、：before：hoverとフルテキストツールチップを表示するためのmake 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>