Does the hoverable region extend beyond the text of the element inside an <a> tag?

Question

Does the hoverable region extend beyond the text of the element inside an <a> tag?

It appears that there is a rectangular border surrounding the text, making it also hoverable. I only want the characters themselves to be hoverable. I attempted using a 'span' element to correct this issue but it did not work as expected.

a:hover{
    color: #ff0000;
    text-shadow: 1px 1px 20px #ff0000;
}
#shrine{
    display: inline-block;
    font-family: 'aurora';
    text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
    transform: scaleY(1.6) scaleX(.9);
    padding: 0;
    margin: 0;
    font-size: 8vw;
    margin-bottom: 2vw;
}

<div class='maindiv'>
    <ul>
      <li>
        <a href=''><span id='shrine'>SHRINE</span></a>
      </li>
    <ul>
<div>

html css

Answer 1

Answer №1

The reason for this behavior is the use of the transform property, which alters how the element appears on the screen.

When an inline element is transformed, its outline will still be based on its original position.

Check out the examples in the provided code snippet. When you apply a transform, the element's outline may try to incorporate both the transformed and original bounding box for event triggering purposes. If your goal is simply to increase text size, it's recommended to utilize the font-size property instead.

* {
    box-sizing: border-box;
}

a {
    outline: 1px solid #000;
}

a:hover{
    color: #ff0000;
    text-shadow: 1px 1px 20px #ff0000;
}

#shrine,
#shrineSmaller,
#shrineNoTransform,
#shrineRight {
    display: inline-block;
    font-family: 'aurora';
    text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
    padding: 0;
    margin: 0;
    font-size: 8vw;
    margin-bottom: 2vw;
}

#shrine {
    transform: scaleY(1.6) scaleX(.9);
}

#shrineSmaller {
    transform: scaleY(1.6) scaleX(.5);
}

#shrineRight {
    transform: scaleY(1.6) scaleX(.9) translateX(115%);
}

<div class='maindiv'>
    <ul>
        <li>
            <a href=''><span id='shrine'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineSmaller'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineNoTransform'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineRight'>SHRINE</span></a>
        </li>
    <ul>
<div>

Answer 2

The reason for this behavior is the use of the transform property, which alters how the element appears on the screen.

When an inline element is transformed, its outline will still be based on its original position.

Check out the examples in the provided code snippet. When you apply a transform, the element's outline may try to incorporate both the transformed and original bounding box for event triggering purposes. If your goal is simply to increase text size, it's recommended to utilize the font-size property instead.

* {
    box-sizing: border-box;
}

a {
    outline: 1px solid #000;
}

a:hover{
    color: #ff0000;
    text-shadow: 1px 1px 20px #ff0000;
}

#shrine,
#shrineSmaller,
#shrineNoTransform,
#shrineRight {
    display: inline-block;
    font-family: 'aurora';
    text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
    padding: 0;
    margin: 0;
    font-size: 8vw;
    margin-bottom: 2vw;
}

#shrine {
    transform: scaleY(1.6) scaleX(.9);
}

#shrineSmaller {
    transform: scaleY(1.6) scaleX(.5);
}

#shrineRight {
    transform: scaleY(1.6) scaleX(.9) translateX(115%);
}

<div class='maindiv'>
    <ul>
        <li>
            <a href=''><span id='shrine'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineSmaller'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineNoTransform'>SHRINE</span></a>
        </li>
        <li>
            <a href=''><span id='shrineRight'>SHRINE</span></a>
        </li>
    <ul>
<div>

Answer 3

Answer №2

To ensure that only the text is hoverable, consider using an SVG path.

Start by visiting to generate the necessary SVG path code.
Next, substitute
```
<a href=''>SHRINE</a>
```
with the newly generated SVG path code.
Lastly, apply CSS for hover effects on the path element.

.maindiv svg > g > path:hover {
    fill: red;
    stroke: red;
}

<div class='maindiv'>
  <ul>
    <li>
      <svg width="255.8" height="70" viewBox="0 0 255.8 70" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 195.1 68.1 L 195.1 70 L 160.9 70 L 160.9 68.1 L 167.5 68.1 L 152.6 41.7 L 136.7 68.1 L 147.3 68.1 L 147.3 70 L 126.6 70 L 126.6 68.1 L 133.3 68.1 L 150.8 38.7 L 129.9 2 L 124.5 2 L 124.5 0 L 158.2 0 L 158.2 2 L 151.4 2 L 164.9 26.2 L 180 2 L 169.6 2 L 169.6 0 L 190.1 0 L 190.1 2 L 183.5 2 L 166.6 29 L 189.3 68.1 L 195.1 68.1 Z M 66.8 2.2 L 66.8 0 L 118.8 0 L 119.8 19.8 L 118 19.8 A 67.919 67.919 0 0 0 115.61 14.629 Q 112.508 8.647 109.2 5.95 A 14.803 14.803 0 0 0 104.453 3.42 Q 100.776 2.2 95.7 2.2 L 92.2 2.2 L 92.2 33.1 L 95.6 33.1 A 10.151 10.151 0 0 0 103.094 29.98 A 12.683 12.683 0 0 0 103.5 29.55 A 17.096 17.096 0 0 0 106.329 25.162 Q 107.216 23.219 107.796 20.88 A 30.604 30.604 0 0 0 108 20 L 109.5 20 L 109.5 49.6 L 107.8 49.6 A 43.088 43.088 0 0 0 106.689 45.721 Q 105.372 41.871 103.587 39.632 A 10.977 10.977 0 0 0 102.95 38.9 A 10.075 10.075 0 0 0 97.44 35.96 A 14.764 14.764 0 0 0 94.6 35.7 L 92.2 35.7 L 92.2 67.8 L 96 67.8 A 25.565 25.565 0 0 0 104.39 66.468 A 22.33 22.33 0 0 0 111.65 62.3 Q 118.1 56.8 120.5 48.2 L 122.5 48.2 L 121.7 70 L 66.8 70 L 66.8 67.8 L 72.7 67.8 L 72.7 2.2 L 66.8 2.2 Z M 1 0 L 60 0 L 61 25.1 L 59.1 25.1 Q 54.709 11.827 51.314 6.97 A 17.41 17.41 0 0 0 51.3 6.95 A 10.911 10.911 0 0 0 43.334 2.207 A 15.276 15.276 0 0 0 41.5 2.1 L 40.3 2.1 L 40.3 67.9 L 48.8 67.9 L 48.8 70 L 12.3 70 L 12.3 67.9 L 20.8 67.9 L 20.8 2.1 L 19.5 2.1 A 12.906 12.906 0 0 0 14.943 2.871 Q 11.833 4.035 9.734 6.959 A 14.19 14.19 0 0 0 9.6 7.15 A 29.46 29.46 0 0 0 7.691 10.387 Q 5.851 13.948 3.837 19.465 A 169.507 169.507 0 0 0 1.9 25.1 L 0 25.1 L 1 0 Z M 195.8 0 L 254.8 0 L 255.8 25.1 L 253.9 25.1 Q 249.509 11.827 246.114 6.97 A 17.41 17.41 0 0 0 246.1 6.95 A 10.911 10.911 0 0 0 238.134 2.207 A 15.276 15.276 0 0 0 236.3 2.1 L 235.1 2.1 L 235.1 67.9 L 243.6 67.9 L 243.6 70 L 207.1 70 L 207.1 67.9 L 215.6 67.9 L 215.6 2.1 L 214.3 2.1 A 12.906 12.906 0 0 0 209.743 2.871 Q 206.633 4.035 204.534 6.959 A 14.19 14.19 0 0 0 204.4 7.15 A 29.46 29.46 0 0 0 202.491 10.387 Q 200.651 13.948 198.637 19.465 A 169.507 169.507 0 0 0 196.7 25.1 L 194.8 25.1 L 195.8 0 Z" vector-effect="non-scaling-stroke"/></g></svg>
     </li>
   </ul>
 </div>

Answer 4

To ensure that only the text is hoverable, consider using an SVG path.

Start by visiting to generate the necessary SVG path code.
Next, substitute
```
<a href=''>SHRINE</a>
```
with the newly generated SVG path code.
Lastly, apply CSS for hover effects on the path element.

.maindiv svg > g > path:hover {
    fill: red;
    stroke: red;
}

<div class='maindiv'>
  <ul>
    <li>
      <svg width="255.8" height="70" viewBox="0 0 255.8 70" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 195.1 68.1 L 195.1 70 L 160.9 70 L 160.9 68.1 L 167.5 68.1 L 152.6 41.7 L 136.7 68.1 L 147.3 68.1 L 147.3 70 L 126.6 70 L 126.6 68.1 L 133.3 68.1 L 150.8 38.7 L 129.9 2 L 124.5 2 L 124.5 0 L 158.2 0 L 158.2 2 L 151.4 2 L 164.9 26.2 L 180 2 L 169.6 2 L 169.6 0 L 190.1 0 L 190.1 2 L 183.5 2 L 166.6 29 L 189.3 68.1 L 195.1 68.1 Z M 66.8 2.2 L 66.8 0 L 118.8 0 L 119.8 19.8 L 118 19.8 A 67.919 67.919 0 0 0 115.61 14.629 Q 112.508 8.647 109.2 5.95 A 14.803 14.803 0 0 0 104.453 3.42 Q 100.776 2.2 95.7 2.2 L 92.2 2.2 L 92.2 33.1 L 95.6 33.1 A 10.151 10.151 0 0 0 103.094 29.98 A 12.683 12.683 0 0 0 103.5 29.55 A 17.096 17.096 0 0 0 106.329 25.162 Q 107.216 23.219 107.796 20.88 A 30.604 30.604 0 0 0 108 20 L 109.5 20 L 109.5 49.6 L 107.8 49.6 A 43.088 43.088 0 0 0 106.689 45.721 Q 105.372 41.871 103.587 39.632 A 10.977 10.977 0 0 0 102.95 38.9 A 10.075 10.075 0 0 0 97.44 35.96 A 14.764 14.764 0 0 0 94.6 35.7 L 92.2 35.7 L 92.2 67.8 L 96 67.8 A 25.565 25.565 0 0 0 104.39 66.468 A 22.33 22.33 0 0 0 111.65 62.3 Q 118.1 56.8 120.5 48.2 L 122.5 48.2 L 121.7 70 L 66.8 70 L 66.8 67.8 L 72.7 67.8 L 72.7 2.2 L 66.8 2.2 Z M 1 0 L 60 0 L 61 25.1 L 59.1 25.1 Q 54.709 11.827 51.314 6.97 A 17.41 17.41 0 0 0 51.3 6.95 A 10.911 10.911 0 0 0 43.334 2.207 A 15.276 15.276 0 0 0 41.5 2.1 L 40.3 2.1 L 40.3 67.9 L 48.8 67.9 L 48.8 70 L 12.3 70 L 12.3 67.9 L 20.8 67.9 L 20.8 2.1 L 19.5 2.1 A 12.906 12.906 0 0 0 14.943 2.871 Q 11.833 4.035 9.734 6.959 A 14.19 14.19 0 0 0 9.6 7.15 A 29.46 29.46 0 0 0 7.691 10.387 Q 5.851 13.948 3.837 19.465 A 169.507 169.507 0 0 0 1.9 25.1 L 0 25.1 L 1 0 Z M 195.8 0 L 254.8 0 L 255.8 25.1 L 253.9 25.1 Q 249.509 11.827 246.114 6.97 A 17.41 17.41 0 0 0 246.1 6.95 A 10.911 10.911 0 0 0 238.134 2.207 A 15.276 15.276 0 0 0 236.3 2.1 L 235.1 2.1 L 235.1 67.9 L 243.6 67.9 L 243.6 70 L 207.1 70 L 207.1 67.9 L 215.6 67.9 L 215.6 2.1 L 214.3 2.1 A 12.906 12.906 0 0 0 209.743 2.871 Q 206.633 4.035 204.534 6.959 A 14.19 14.19 0 0 0 204.4 7.15 A 29.46 29.46 0 0 0 202.491 10.387 Q 200.651 13.948 198.637 19.465 A 169.507 169.507 0 0 0 196.7 25.1 L 194.8 25.1 L 195.8 0 Z" vector-effect="non-scaling-stroke"/></g></svg>
     </li>
   </ul>
 </div>

Answer 5

Answer №3

When you scale the text, it may exceed the line-height of the li container, causing overflow. By setting li{overflow:hidden}, you can observe how much of the text height is considered overflow by the li.

As an illustration, adding

li {line-height: 350%; overflow:hidden}

to your CSS could make the line-height match the text size precisely (on my browser), resulting in a more defined hover area. However, I would not recommend this as it's just to demonstrate the issue.

a:hover{
    color: #ff0000;
    text-shadow: 1px 1px 20px #ff0000;

}
#shrine{
    display: inline-block;
    font-family: 'aurora';
    text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
    transform: scaleY(1.6) scaleX(.9);
    padding: 0;
    margin: 0;
    font-size: 8vw;
    margin-bottom: 2vw;
    
}
li {line-height: 350%; overflow:hidden}

<div class='maindiv'>
            <ul>
                <li>
                    <a href=''><span id='shrine'>SHRINE</span></a>
                </li>
            <ul>
<div>

Answer 6

When you scale the text, it may exceed the line-height of the li container, causing overflow. By setting li{overflow:hidden}, you can observe how much of the text height is considered overflow by the li.

As an illustration, adding

li {line-height: 350%; overflow:hidden}

to your CSS could make the line-height match the text size precisely (on my browser), resulting in a more defined hover area. However, I would not recommend this as it's just to demonstrate the issue.

a:hover{
    color: #ff0000;
    text-shadow: 1px 1px 20px #ff0000;

}
#shrine{
    display: inline-block;
    font-family: 'aurora';
    text-shadow: 1px 1px 0px #ff0000, 1px -1px 0px #ff0000, -1px -1px 0 #ff0000, -1px 1px 0px #ff0000;
    transform: scaleY(1.6) scaleX(.9);
    padding: 0;
    margin: 0;
    font-size: 8vw;
    margin-bottom: 2vw;
    
}
li {line-height: 350%; overflow:hidden}

<div class='maindiv'>
            <ul>
                <li>
                    <a href=''><span id='shrine'>SHRINE</span></a>
                </li>
            <ul>
<div>

Does the hoverable region extend beyond the text of the <span> element inside an <a> tag?

Answer №1

Answer №2

Answer №3

Similar questions

Dynamic CSS overlay based on database field content without requiring user interaction

How Jquery Can Be Used to Dynamically Add Extra Rows in HTML Without Submitting Data via POST Requests

What is the best way to show a label and select box side by side using Angular Material?

Guide on grabbing characters/words typed next to # or @ within a div element

Firing a jQuery event at precise mouse coordinates

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Challenges with the Task List Board

determining the number of td elements in a row of a table located within an iframe

In my JavaScript code, I am looking to increase a value within a classList template string

Define a specific Css class within an ID

Uploading an image directly from the canvas

Changing the hover background color and text color of Material UI Button

Is the utilization of javascript functions intertwined with the specific version of bootstrap being used?

Trouble encountered when attempting to override styles in Material UI's TableRow

Developing a Chessboard Using JavaScript

Uploader and viewer tool for HTML5 documents

AngularJS allows for the submittal button to be adjusted accordingly when changes are made in

Does the Fileupload jQuery event function differently when uploading from a mobile device compared to a desktop computer?

Guide to centering a Material UI Table on a webpage

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11