我将背景颜色应用于国家/地区列表中的链接。总体来说效果很好:
然而,对于名称较长的国家来说,它的效果不太好。
我试图让黄色溢出一切并清楚地显示国家的全名。
HTML:
<div class="flagList">
<div class="flagColumn"> ... </div>
<div class="flagColumn"> ... </div>
<div class="flagColumn"> ... </div>
...
</div>
CSS:
.flagColumn {
width: 33%;
float: left;
border:0px solid;
height:1.6em;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
z-index: 1; position:relative;
}
.flagColumn:hover {
overflow:visible;
z-index: 2; position:relative;
display: inline;
background-color:yellow;
}
您可以通过包装内容来做到这一点.flagColumn
在一个额外的元素中,将其设置为display: inline-block;
并设置背景:
.flagColumn {
float: left;
height: 1.6em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 33%;
z-index: 1;
}
.flagColumn:hover {
overflow: visible;
position: relative;
z-index: 2;
}
.flagColumn:hover span {
background-color: yellow;
display: inline-block;
height: 100%;
}
<div class="flagList">
<div class="flagColumn"><span>This is test text!</span></div>
<div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div>
<div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div>
</div>
JSFiddle: http://jsfiddle.net/hL9qfuvb/1/ http://jsfiddle.net/hL9qfuvb/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)