圖像的隱藏的語音氣泡工具提示

我有這個代碼，當您將鼠標懸停在圖像上時，會出現隱藏的語音氣泡。圖像的隱藏的語音氣泡工具提示

#container { 
background-color: #FF0; 
margin: 100px; 
float: left; 
height: 200px; 
width: 200px; 
text-align: center; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 16px; 
} 

    div.hoverbubble { 
    position: relative; 
    text-decoration: none; 
    width:50px; 
    height:50px; 
    } 

div.hoverbubble span {display: none;} 
div.hoverbubble:hover span { 
display: block; 
position: absolute; 
padding: .5em; 
content: attr(title); 
min-width: px; 
text-align: center; 
width: auto; 
height: auto; 
white-space: nowrap; 
top: -40px; 
background: rgba(0,0,0,.8); 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
color: #fff; 
font-size: 0.86em; 
font-family: Arial, Helvetica, sans-serif; 
    } 
    div.hoverbubble:hover span:after { 
position: absolute; 
display: block; 
content: ""; 
border-color: rgba(0,0,0,.8) transparent transparent transparent; 
border-style: solid; 
border-width: 10px; 
height: 0; 
width: 0; 
position: absolute; 
bottom: -20px; 
left: 1em; 
    } 

    <div id="container"><div class="hoverbubble"><img src="test.gif" width="50" 
    height="50" border="0" /><span>Hidden message here.</span></div>

，我想知道如果有一種方法樣式的形象呢？

width:100%; border:1px solid {color:border}; margin-bottom:6px; 
{block:ifroundedsidepic} 
-webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; 
{/block:ifroundedsidepic}

我試着這樣做：

<img src="{image:sidepic}" style="width:100%; border:1px solid {color:border}; margin- 
bottom:6px;{block:ifroundedsidepic}-webkit-border-radius:100px; -moz-border- 
radius:100px; border-radius:100px;{/block:ifroundedsidepic}"/>

而且我也試過在CSS創建圖像ID 「#kuroko」，改變了HTML來

<img id="kuroko" src="{image:sidepic}" /><span>Hidden message here.</span>

但它沒有奏效。有沒有任何可能的方式來設計這個圖像？

來源

2014-05-19 sha

要對一個元素進行一個接一個的設計，您需要使用選擇器：+。你的情況下將是：

<img/><span></span>

與CSS基：

img + span { 
display:none; 
} 
img:hover + span { 
display:block; 
}

對於使用屬性title和從img僞元件的情況下，這將是不可能的。例如，img和輸入不能生成僞元素。

來源

2014-05-19 07:06:23

圖像的隱藏的語音氣泡工具提示

回答

相關問題