0

テキストの幅を広げようとしています。太字にしようとはしていません。テキストの内側を空のままにしようとしています。テキストを色で塗りつぶし、ホバーで色を変更するのが私の考えです。

これが私が達成しようとしていることの写真です：

http://img.ctrlv.in/50eee77779a5b.jpg

問題は、cssを使用してテキスト幅を増やす方法が見つからないことです（javascriptで見つけましたが、テキストは画像のプロパティを想定しています）（したがって、ホバー効果は不可能です）（増やす方法を見つけましたこちらのw3schoolsチュートリアルでJavaScriptを使用したフォント幅

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2）

私はhtmlソリューションを探しています（キャンバスではありません）

この効果を実現するためのショートカットがCSS3/HTML 5にあることは知っていますが、効果を見たサイトを再収集/検索することはできません。

助けていただければ幸いですよろしくお願いします

4

2 に答える 2

0

完璧ではないかもしれませんが、文字幅を増やすことができる CSS セレクターがわからない場合は、次のようなものを試すことができます。

a:hover {
    letter-spacing: 0.2em;
    color: #07C;
}

これにより、文字間の距離が長くなり、ホバーイベントには jquery ではなく css を使用すると、より簡単になります!

于 2013-01-10T16:09:50.323 に答える
0

私が見る限り、あなたは実際にテキストをストロークしたいと思っています。フォントの幅は、ストロークがテキストの境界の外側にある限り同じままでかまいませんよね? CSS Tricks には、webkit-text-stroke および/または text-shadow を使用したテキストのストロークについて説明する記事があります。ここに例を示します。

したがって、次のような結果になります。

/* CSS from tutorial */
.stroke {
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;

  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */

  color: white;

  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

/* The colour changing bit - added by me */
.stroke:hover {
   color:blue;
}
于 2013-01-10T16:18:45.610 に答える