1

私はこれに対する解決策をどこでも探してきたので、それが単純であるとは本当に思っていません。

頭上にテキスト ラベルが付いたアイコンを表示したい。カーソルがテキストの上にあるかアイコン画像の上にあるかに関係なく、テキストがホバーに反応するようにしたいと思います。

私が見つけることができる最も近い例は、このリンクにあります http://www.sencha.com/forum/showthread.php?122028-Label-with-icon

これにより、次の CSS ソリューションが得られます。

Label l = new Label("My Text"); l.addStyleName("my-label");

#CSS
.my-label {
background:url(my-icon.png) no-repeat right center;
padding-right:20px;
}

しかし、私の CSS スキルは十分ではありません。これをアイコン画像の左側の中央ラベルではなく、中央上部のラベルに適応させることにあまり成功していません。

誰か試してみませんか？

追加情報：

これが私が今持っているものです-これは機能していません。属性"display: block;を使用できないようです...background-img

CSS:

 .blogicon {
    width: 70px;
    text-align: center;
    background-img:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat bottom center;
    display: block;
    padding-top: 4px;
    padding-bottom: 90px;
    }

HTML:

/* <h6 class="blogicon"><a href="/blog-index.html/">Blog</a></h6> */
4

2 に答える 2

1

アイコンの上にテキストを表示する場合は、CSS を次のように変更できます。

.my-label {
    background:url(my-icon.png) no-repeat bottom center;
    padding-bottom:20px; /* this should be >= the icon's height */
}
于 2013-04-30T05:10:00.033 に答える