这是我多次访问后在这里发表的第一篇文章。您好!
我正在尝试在图像上添加弹出注释。我正在使用 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，所以我很感激任何帮助
最佳答案
这是我对这个问题的解决方案: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
}
关于css - 如何使下拉列表向左延伸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8874597/