숨겨진 연설 거품 툴팁

이미지 위로 마우스를 가져 가면 숨겨진 연설 거품이 나타나는이 코드가 있습니다. 이 이미지를 스타일링 할 수있는 방법이 있는지숨겨진 연설 거품 툴팁

#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"를 만드는 시도하고

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

에 HTML을 변경했습니다

하지만 작동하지 않았습니다. 이 이미지의 스타일을 지정하는 방법이 있습니까?

출처

2014-05-19 sha

다른 요소 바로 뒤의 요소 스타일을 지정하려면 +을 사용해야합니다. 케이스가 될 것이다하는 CSS 염기

<img/><span></span>

: 속성 title 및 img에서 유사 소자를 사용하는 경우에 대해

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

것이 가능하지 않을 것이다. 예를 들어, img 및 입력은 의사 요소를 생성 할 수 없습니다.

출처

2014-05-19 07:06:23

숨겨진 연설 거품 툴팁

답변

관련 문제