0

I am trying to make a link on a header be clickable on the text of the header only. Problem is, in my case, the link is still clickable, even when there is no text(it still clicks on empty blue space to the right). Example:

header image

as you can see, the whole blue is clickable, but I just want the click to end after the "Hello World Link" word.

Is there a way to allow to click only on the text "Hello World Link" and not the rest of blue empty space to the right?

My code:

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

CSS:

  .headerText{
       h2:hover {
         background-color: yellow;
    }
  }
Emma
  • 27,428
  • 11
  • 44
  • 69

3 Answers3

0

For applying link to text only, move the a element just above the text element(here h2). Try this:

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

Also check the style of h2. If it has a fixed width wider than the text, it may cause again this problem. Better to provide an HTML,CSS snippet in the question.

Jins Thomas Shaji
  • 857
  • 5
  • 16
  • I proved the CSS above. Basically, I am trying to highlight the header text on hover with yellow color. With this is current CSS, it is highlighting the full width in yellow. How can I set the width to just fit the length of the text? –  Nov 21 '20 at 03:30
  • Hard to understand the issue from the provided CSS. Could you please provide an HTML/CSS snippet for reproducing the exact scenario? It's there in the stack-overflow editor options. – Jins Thomas Shaji Nov 21 '20 at 03:43
0

Simply use display: inline-block; on your .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;
  }
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
-1

I don't know whitch are the defined styles of yours components, but on some cases you can use the css empty pseudo class, and set the pointer-events property as none. This approach just work in the case that the element doesn't have any children and also the element content is empty.

a:empty {
  pointer-events:none;
}
jpcoseani
  • 169
  • 2