在悬停时，文本会覆盖背景内容

时间：2016-11-07 15:00:45

标签： html css hover

我想做的是，我的文字，在表格中，悬停在白色背景的内容上并展开。我得到了扩展，但我无法获得内容溢出。这里也是我的代码的JsFiddle：JsFiddle

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

您可以white-space: pre-wrap;使用:hover来显示整个文字。这将有助于您溢出内容并显示内容。

以下是更新的 Fiddle

修改

或者，如果您不想更改行的高度，则需要在悬停时设置width: auto;。

就像：

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

希望这有帮助！

答案 1 :(得分：1)

您可以使用变换来显示背景：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 2 :(得分：1)

您可以尝试在单元格div上使用：before伪元素，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">

				<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" tooltip="Linux Ubuntu">Linux Ubuntu</div>
					<div class="browser" tooltip="Google Chrome">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" tooltip="Windows XP Professional x64 Edition">Windows XP Professional x64 Edition</div>
					<div class="browser" tooltip="Mozilla Firefox">Mozilla Firefox</div>
					<div class="status">Success</div>
				</div>

			</div>

相关问题
最新问题