Css 如何使下拉列表向左延伸？_Css

Css 如何使下拉列表向左延伸？

css

Css 如何使下拉列表向左延伸？,css,Css,这是我经过多次访问后在这里发表的第一篇文章。你好! 我试图在图像上做弹出式注释。我正在使用CSS下拉菜单行为来实现这一点。你可以看到我的例子将鼠标悬停在左侧的提示图标上时，容器将展开以显示文本。但对于右侧的提示图标，文本框延伸到图像边界之外如何使文本框显示在图标的左侧，使其保持在图像中？我使用了带有负值的左边距，但它也会移动提示图标这是我的密码：试验 </head> <body> <style type="text/css"> .contain

这是我经过多次访问后在这里发表的第一篇文章。你好!

我试图在图像上做弹出式注释。我正在使用CSS下拉菜单行为来实现这一点。你可以看到我的例子

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

如何使文本框显示在图标的左侧，使其保持在图像中？我使用了带有负值的左边距，但它也会移动提示图标

这是我的密码：试验

</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>


.集装箱{
z指数：1000；
宽度：15px；
高度：18px；
溢出：隐藏；
位置：绝对位置；
}
.容器：悬停{
宽度：200px；
高度：自动；
}
.复制{
字体大小：12px；
字体系列：Helvetica、Verdana、Arial、无衬线字体；
填充物：5px；
背景色：#ffcc99；
}
#绘画{
保证金：0；
填充：0；
宽度：750px；
高度：530px；
背景：url（painting.jpg）左上角不重复#ffffff；
}
#tip1{
左：185px；
顶部：60px；
}
#tip2{
左：698px；
顶部：290px；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。自由的赌注，自由的宣言，莫利斯的承诺。在生命之门内，车辆或交通工具。这是一种非特殊元素。公共卫生服务暂停
Lorem ipsum dolor sit amet，是一位杰出的献身者。自由的赌注，自由的宣言，莫利斯的承诺。在生命之门内，车辆或交通工具。这是一种非特殊元素。公共卫生服务暂停

我还在学习CSS，所以我非常感谢您的帮助

试试这个

.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;
}

请注意，这有点不太正常，

copy

部分目前被隐藏，因为您只是将它们变得很小，并隐藏溢出

可能有一种聪明的CSS方法可以“正确”地实现它，但我倾向于使用一点javascript，这样当您将鼠标移到一个元素上时，它会显示另一个

在回答你的主要问题时，结合使用

position:relative

和使用负数

left

偏移量达到了目的。有关相对定位的更多信息，请参见此处：

这是我对这个问题的解决方案：默认情况下，不要使容器内容溢出，而是将其隐藏并显示在

：hover

。将

位置：绝对

添加到

.copy

和

#tip2.copy{…；right:0}

应该可以做到这一点

编辑（CSS副本）

你应该考虑使用jQuery插件来管理工具提示，因为单独使用CSS不能解释不同的屏幕分辨率，所以强制弹出到左边或右边可能会迫使它离开屏幕。这是一个伟大的插件，可以确定鼠标的位置，并在清晰的屏幕上显示弹出窗口

啊，非常好。我不知道你可以做类似

。容器：hover.copy

。比我的黑客解决方案好多了：）我也不知道这是可能的。非常感谢你！谢谢你的建议。我从未使用过jquery或javascript，但我想学习。谢谢你的帮助。很高兴看到有不止一种解决方案。

.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
}