z-index和工具提示

我想在css中使用工具提示，它工作正常，但工具提示出現時出現問題，因爲p標籤中的文本顯示的是跨度內容「tooltip」我想展示所有的內容。我一直試圖用h z-index，也定義標籤中的位置，但不能理解它爲什麼不起作用。我會apreciate關於如何解決它的任何提示。z-index和工具提示

我的下一個HTML結構

<div> 
     <a class="tooltip"> 
      <p>Test1</p> 
      <span>saassa</span> 
     </a> 
    </div>

而CSS：

a.tooltip { 
    outline: none; 
    text-decoration: none; 
    border-bottom: dotted 1px blue; 
    display: inline; 
    position: relative; 
    padding: 0; 
    background: none repeat scroll 0 0 #bcd9db; 
    z-index: 20; 
} 

a.tooltip p { 
    margin-bottom: 0px; 
    display: inline; 
    color: #006565; 
    position: relative; 
    z-index: 20; 
} 

a.tooltip > span { 
    width: 25em; 
    padding: 10px 20px; 
    margin-top: 20px; 
    margin-left: -85px; 
    opacity: 0; 
    visibility: hidden; 
    z-index: 1000; 
    position: absolute; 
    font-family: Arial; 
    font-size: 12px; 
    font-style: normal; 
    color: #000000; 
    background: #FBF5E6; 
    border: 2px solid #CFB57C; 
    z-index: 1000; 
} 

a.tooltip:hover > span { 
    opacity: 1; 
    text-decoration: none; 
    visibility: visible; 
    overflow: visible; 
    margin-top: 50px; 
    display: inline; 
    margin-left: -260px; 
    background: #fbf5e6; 
    position: absolute; 
    z-index: 100000; 
}

我已經loadded擺弄，所以你可以看到它，只需將鼠標懸停在任何三個第一環節和你會看到不能看到div的所有內容。 http://jsfiddle.net/mtzcq/3/

非常感謝您

來源

2012-11-05 Bernardao

從a.tooltip，並a.tooltip p取出z-index。

http://jsfiddle.net/mtzcq/7/

在Firefox爲我工作的Mac

來源

2012-11-05 17:51:57 coopersita

謝謝Coopersita 這解決了它在小提琴中，但不是在我的網站。有關爲何刪除2個屬性看起來更好的任何解釋？ – Bernardao

說實話，我不知道爲什麼。這個頁面有很多z-index，vs no z-index和不同值的例子：http://css-class.com/test/css/visformatting/layers/z-index.htm幫助：http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ Suerte！ – coopersita

我會刪除你擁有的所有z索引，並開始將它們添加到上面的其他項目上。你可能會在其他地方設置一些z-index，這就是爲什麼你的頁面受到影響，但不是小提琴。 – coopersita

恩ELcódigoHTML tienes闕quitar迪登特魯德爾跨度洛杉磯H6

來源

2012-11-05 17:51:29

這樣，你不」解決我的問題。你剛纔把div移出了頁面。 – Bernardao

Nosécomo puedo darte puntos，yo soy un novatoaquíy creo que no tengo puntos para dar。 – Bernardao

No creo que Bernardao tenga los suficientes puntos como para poder votar。 – coopersita

刪除的「Z-指數」的所有實例除了一個在a.tooltip>跨度

來源

2012-11-05 18:14:25

多數民衆贊成我是如何讓我的網站，我再次以同樣的方式設置它。只有在我的網站和它的頭上是另一個z-index，但不顯示在同一個區域。 – Bernardao

z-index和工具提示

回答

相關問題