Question

这是我多次访问后的第一篇文章。您好！

我正在尝试在图像上弹出注释。我正在使用CSS下拉菜单行为来执行此操作。您可以看到我的示例here

当您将鼠标悬停在左侧的提示图标上时，容器会展开以显示文本。但是对于右侧的提示图标，文本框会延伸到图像边界之外。

如何使文本框出现在图标的左侧，使其保留在图像中？我使用了margin-left和负值，但它也移动了提示图标。

这是我的代码：测试

</head>
<body>

<style type="text/css"> 

.container {
z-index: 1000;
width: 15px;
height: 18px;
overflow: hidden;
position: absolute;
}
.container:hover {
width: 200px;
height: auto;
}

.copy {
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
padding: 5px;
background-color: #ffcc99;
}

#painting {
margin: 0;
padding: 0;
width: 750px;
height: 530px;
background: url(painting.jpg) top left no-repeat #ffffff;
}

#tip1 {
left: 185px;
top: 60px;
}

#tip2 {
left: 698px;
top: 290px;
}

</style>


<div id="tip1" class="container">
    <div class="icon">
        <img src="tip_icon.png">
    </div>

    <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p>
    </div>
</div>

<div id="tip2" class="container">
    <div class="icon">
        <img src="tip_icon.png">
    </div>

    <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p>
    </div>
</div>

<div id="painting">
    </div>

</body>

我还在学习CSS所以感谢任何帮助

Answer 1

这是我解决此问题的方法：http://jsfiddle.net/CwgDQ/1/ 而不是溢出容器的内容默认隐藏它并显示在:hover上。将position:absolute添加到.copy，#tip2 .copy { ...; right:0 }就可以了。

编辑（CSS副本）

.container {
    z-index: 1000;
    position: absolute;
}

.container:hover {
    height: auto;
}

.container .copy {
    display:none;
}

.container:hover .copy {
    display:block;
    width: 200px;
}

.copy {
    font-size: 12px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    padding: 5px;
    background-color: #ffcc99;
    position:absolute;
}

#painting {
    margin: 0;
    padding: 0;
    width: 750px;
    height: 530px;
    background: url(http://www.troyoxford.com/paint/painting.jpg) top left no-repeat #ffffff;
}

#tip1 {
    left: 185px;
    top: 60px;
}

#tip2 {
    left: 698px;
    top: 290px;
}

#tip2 .copy {
    right:0
}

Answer 2

试试这个......

.container {
    z-index: 1000;
    width: 15px;
    height: 18px;
    position: absolute;
    overflow: hidden;
}

.container:hover {
    width: 200px;
    height: auto;
    overflow: visible;
}

.copy {
    font-size: 12px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    padding: 5px;
    background-color: #ffcc99;
}

#painting {
    margin: 0;
    padding: 0;
    width: 750px;
    height: 530px;
    background: url(painting.jpg) top left no-repeat #ffffff;
}

#tip1 {
    left: 185px;
    top: 60px;
}

#tip2 {
    left: 698px;
    top: 290px;
}

#tip2 .copy {
    position: relative;
    left: -185px;
}

请注意，它有点hacky，此时copy部分被隐藏的方式，因为你只是让它们变小，并隐藏溢出。

可能有一种聪明的CSS方式来“正确”实现它，但我倾向于使用一点点javascript，所以当你将鼠标悬停在一个元素上时，它会显示另一个...

在回答您的主要问题时，合并使用position: relative并使用负left偏移量就可以了。有关相对定位的更多信息，请参见此处：

http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

您应该考虑使用jquery插件来管理工具提示，因为仅使用CSS就无法考虑不同的屏幕分辨率，因此强制弹出窗口向左或向右可能会强制它离开屏幕。这是一个很棒的插件，可以确定鼠标的位置，屏幕可以在清晰的视图中显示弹出窗口。

http://craigsworks.com/projects/qtip2/demos/

如何将下拉列表向左延伸？

3 个答案: