7

通常、マウス ホバー時にテキストに下線が引かれますが、中央にこの下線のないセクション (画像など) がある連続したリンクを作成することは可能ですか? これは動作しません：

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>
4

4 に答える 4

3 
a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }
于 2010-06-04T08:28:25.537 に答える
2 
<a href="#" style="text-decoration:none;">
     <span style="text-decoration:underline;">one</span>  
    two
    <img src="img.png" style="border:0px; text-decoration:none;"> three
</a>

次のようにJavaScriptを使用することでのみ可能になると思います。

次の例を見てください

<html>
<head></head>
  <style>
    a{
       text-decoration:none;
     }

    a:hover
     {
       text-decoration:none;
     }

    .sample
     {
        text-decoration:underline;
     }

    .sample_none
     {
        text-decoration:none;
     }
   </style>
   <script type="text/javascript">
      function show_underline(){
        document.getElementById('sample').className= 'sample';
      }

      function hide_underline(){
        document.getElementById('sample').className= 'sample_none';
      }
   </script>
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>  
    <img src="img.png" style="border:0px;"> three
    </a>


</body>
</html>

PScssとhtmlだけで可能かどうか知りたい

于 2010-06-04T07:40:02.747 に答える
1

私が本当に望んでいたのは、ホバー時に下線が引かれることなく、リンクに画像を「添付」することでした。これが私が思いついた解決策です：

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>
  • padding-leftは、画像と重ならないようにテキストをオフセットするためのものです。
  • background-positionを使用すると、画像を移動して、テキストとの位置合わせを改善できます。
  • 画像がテキストよりも高い場合、padding-top とpadding-bottomを使用して外観を微調整できます。

この手法は、次のようなCSS スプライトでも使用できます。

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

同様の手法を使用して、通常のインライン画像の代わりに CSS スプライトを使用しました。

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

これが誰かを助けることを願っています

于 2010-07-09T12:57:19.353 に答える