ヘッダーのテキストのみをクリックし、右側の空の空白はクリックしない方法は？

bugfix> javascript > 投稿

ヘッダーのリンクをクリックできるようにしようとしていますテキストヘッダーのみ。問題は、私の場合、テキストがない場合でもリンクをクリックできることです（右側の空の青いスペースをクリックします）。例：ヘッダー画像 （ご覧のとおり、青全体をクリックできますが、「HelloWorldLink」という単語の後にクリックを終了したいだけです）。

「HelloWorldLink」というテキストのみをクリックして、右側の青い空のスペースの残りの部分をクリックしないようにする方法はありますか？

私のコード：

<a href="blah blaha ">
   <div class="headerText">
       <h2>@title</h2>
   </div>
</a>

CSS：

 .headerText{
       h2:hover {
         background-color: yellow;
    }
  }

javascript

c#

html

回答 3 件

  • 単に使用する display: inline-block; あなたに .headerText DIV

    .headerText {
  display: inline-block;
}
.headerText h2:hover {
  background-color: yellow;
}


    <a href="blah blaha ">
   <div class="headerText">
       <h2>@title</h2>
   </div>
</a>

    SCSS：

    .headerText{
  display: inline-block;
  h2:hover {
    background-color: yellow;
  }
}

  • テキストのみにリンクを適用する場合は、 a テキスト要素のすぐ上の要素（ここでは h2 ）。 これを試して：

    <div class="headerText">
  <a href="blah blaha ">
    <h2>@title</h2>
  </a>
</div>

    のスタイルもチェック h2 。テキストよりも幅が固定されている場合は、この問題が再び発生する可能性があります。質問にHTML、CSSスニペットを提供することをお勧めします。

  • コンポーネントの定義されたスタイルが何であるかはわかりませんが、場合によっては、css empty pseudo classを使用して、pointer-eventsプロパティをnoneに設定できます。このアプローチは、要素に子がなく、要素のコンテンツが空の場合にのみ機能します。

    a:empty {
  pointer-events:none;
}

あなたの答え

関連記事