如何讓下拉菜單延伸到左側？

我想在圖像上做出彈出註釋。我正在使用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，所以我感謝所有幫助

來源

2012-01-16 sunnypop

這是我解決這個問題：http://jsfiddle.net/CwgDQ/1/ 相反，它在默認情況下，並顯示在:hover溢出容器隱藏的內容。加position:absolute到.copy和#tip2 .copy { ...; right:0 }應該做的伎倆。

EDIT（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 
}

來源

2012-01-16 00:36:45 veritas

啊，非常好。我不知道你可以做'.container：hover .copy'。比我的黑客解決方案好得多:) – 2012-01-16 00:41:32

我不知道這是可能的。非常感謝！ – sunnypop 2012-01-16 14:43:53

嘗試......

.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

來源

2012-01-16 00:35:48

謝謝你的幫助。很高興看到有多個解決方案。 – sunnypop 2012-01-16 14:48:19

您應該考慮使用一個jQuery插件管理工具提示，因爲與CSS只有你能不能解釋不同的屏幕分辨率，所以迫使彈出到左或右可能會將其強制離開屏幕。這是一個偉大的插件，可以確定鼠標的位置，並以清晰的視圖顯示彈出窗口。

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

來源

2012-01-16 01:46:26 Anagio

感謝您的意見。我從來沒有使用jQuery或JavaScript，但我想學習。 – sunnypop 2012-01-16 14:46:20