Question

这里描述了这个场景：

＆＃13;

.mainbox{
    width:150px;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
	width: 50px;
	height: 50px;
	margin: 2px;
	padding: 2px;
	background-color: #B6DEFC;
	border: 1px solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-color: #A8A8A8;
	position: relative;
	font-size: xx-small;
	cursor: pointer;
	white-space: normal;
}
.position1:hover:after{
	position: absolute;
	width: 100px;
	content: attr(data-title);
	border: 1px solid #FF0000;
	padding: 15px 5px 10px 5px;
	background: #FF9999;
	border-radius:5px;
	z-index: 1000;
	font-size: small;
}

＆＃13;

<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1"></div>
    <div class="position1" data-title="My data-title2"></div>
    <div class="position1" data-title="My data-title3"></div>
    <div class="position1" data-title="My data-title4"></div>
</div>
</div>

＆＃13;

我希望工具提示（：hover：after）显示在容器和 mainbox 之外。我认为这是一个白色空间问题......

有人可以帮我解决这个问题吗？

提前谢谢你......

Answer 1

试

.position1:hover, .position1:after{
    position: absolute;
    width: 100px;
    content: attr(data-title);
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;

}

Answer 2

更新

您可以尝试这样的解决方案，从position:relative删除.position1，然后将此规则（position:relative）应用到.mainbox，在这种情况下，工具提示将相对于具有规则overflow-x:hidden的元素之外的元素将是可见的。我还更新了代码，再次运行

空格没有问题，容器设置为overflow:hidden您无法显示容器外的工具提示

.mainbox{
    width:150px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
	width: 50px;
	height: 50px;
	margin: 2px;
	padding: 2px;
	background-color: #B6DEFC;
	border: 1px solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-color: #A8A8A8;
	/*position: relative;*/
	font-size: xx-small;
	cursor: pointer;
	white-space: normal;
}
.position1:hover:after{
	position: absolute;
	width: 100px;
	content: attr(data-title);
	border: 1px solid #FF0000;
	padding: 15px 5px 10px 5px;
	background: #FF9999;
	border-radius:5px;
	z-index: 1000;
	font-size: small;
}

<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1"></div>
    <div class="position1" data-title="My data-title2"></div>
    <div class="position1" data-title="My data-title3"></div>
    <div class="position1" data-title="My data-title4"></div>
</div>
</div>

Answer 3

现在我在看到图像后明白你想要的是什么。

你只需将位置绝对更改为固定在.position1：hover：课后，这里是更新的小提琴。

.mainbox{
    width:250px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: fixed;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}

Answer 4

好的，sarhov ...... 即使我不喜欢＆＃34;效果＆＃34; （我的意思是，看看方框3和4，以及它的工具提示：它们显示在离盒子很远的地方）......我无法触摸＆＃34; position1 类中的相对位置。

原因如下......我用上面的代码补充了上面的代码......

我需要在这些框中添加标签：

<!--  HTML -->
<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1">
        <span class="number">1</span>
        <span class="name">Name 1</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title2">
        <span class="number">2</span>
        <span class="name">Name 2</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title3">
        <span class="number">3</span>
        <span class="name">Name 3</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title4">
        <span class="number">4</span>
        <span class="name">Name 4</span>
        <span class="date">2014/10/03</span>
    </div>
</div>
</div>

<!-- CSS -->
.mainbox{
    width:150px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: absolute;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}

Fiddle

建议？

P.s。：代码是在服务器端生成的（它是C＃/ .net WebApp）

：悬停：在css工具提示和空白问题之后

4 个答案: