Enable only the link-text to be clicked when hovering

I'm currently experimenting with creating a link for an h1 title that transforms when hovered over. It's working perfectly fine, but I'm facing an issue - if I place the /a tag outside of the h1 element, the entire element becomes clickable and reacts to hover, which doesn't look good. On the other hand, if I put the /a tag inside the /h1 tag, only the text is clickable as intended, but it doesn't respond to hover effects (although other changes work).

As a beginner, I may not have provided all the necessary context for you to assist me effectively.

The following CSS code allows hover functionality, but makes the entire element clickable:

#headlines a:hover {
  transform: scale(1.5);
  transition: 0.1s;
}
<div class="grid_6" style="color: black; text-align: center">
    <a href="headlines.html"
       id="headlines"
       style="text-decoration: none; color: black">
        <h1> Headlines 
          </h1></a>
        <hr>
  </div>
htmlcss

Answer №1

When hovering over the h1, apply a transform effect...but ensure the h1 remains as display:inline-block to avoid unnecessary size increase.

The link will always remain clickable while addressing the sizing problem.

a#headlines h1 {
  display: inline-block;
}

a#headlines h1 {
  transition: transform .5s ease;
}

a#headlines h1:hover {
  transform: scale(1.5);
}
<div class="grid_6" style="color: black; text-align: center">
  <a href="headlines.html" id="headlines" style="text-decoration: none; color: black">
    <h1> Headlines
    </h1>
  </a>
  <hr>
</div>

Answer №2

Feel free to give it a shot

a#headlines:hover {
 transition: transform .5s ease;
  transform: scale(1.5);
}

Answer №3

To achieve the desired effect, simply include the following CSS code:

 a {
    font-weight: bold;
    font-size: 45px;
    transition: all 500ms;
}

 a:hover {
    font-size:60px;
    font-size-adjust: 20px;
}

You can also view an example of this in action on this Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

obtaining data from an HTML input field

I'm struggling to retrieve the value from an HTML input element, and despite my own research, it seems like I have the correct syntax. However, I'm still unable to get it to work, leaving me confused. When I log the value to the console, it appe ...

javascripthtmltypescriptinput

Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

During my personal project, I came across the react-google-charts library and discovered a method to add markers to the map. <Chart width={"200%"} height={"100%"} chartType={"GeoChart"} data={geoData} rootProps={{ "data-testid": "1" ...

cssreactjsgoogle-maps-markersreact-google-chartsreact-google-maps-api

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

htmlcssbootstrap-4fixed

Is there a way to dynamically adjust the modal header based on the chosen option?

Discussing the following inquiry: Passing data to Bootstrap 3 Modal Typically, the data-id is transferred to a text box in various scenarios by using this line: <input type="text" name="bookId" id="bookId" value="" /> Is there a way to send the da ...

jqueryhtmltwitter-bootstrap

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

htmlangulartypescript

Unlock the modal after choosing an image file

Whenever I click on the upload button, my modal opens with the explorer window. I am looking to have the modal open after selecting an Image file. Below is my HTML and JQuery code: $uploadCrop = $('#upload-demo').croppie({ enableExif: true, ...

javascriptjqueryhtmltwitter-bootstrap

Displaying a popup containing a div when clicking on a link

I need assistance with creating a link that will display a div in a popup window. Here is the link I am working with: <li><a class="newAttachmentType" onclick="getFiles(true)">Move to somewhere</a></li> Also, here is the div that ...

javascriptasp.nethtml

Issue with horizontal navigation in CSS

I'm struggling with styling my CSS navigation bar. The last list item is moving to a second line, which really messes up the look of my website. Can someone take a look at my code and point out what I'm doing wrong? Thank you in advance. HTML: ...

htmlcssnavigation

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...

htmlcsssublimetext2shortcut

Is resizing possible using the Canvas identifier?

Is it possible to adjust the canvas size to match the width of the page using the canvas id's style in the html? Then in your javascript code for the canvas, can you have resize listeners that are responsive to the canvas size at any given time? I c ...

javascripthtmlcanvashtml5-canvas

Automatically transfer images to a designated folder using PHP

I am just starting out in web development. I have a vision of creating a webpage with a photo gallery. Below is the initial code snippet: <body> <div class="container"> <header class="clearfix"> </header> ...

phphtml

I will receive a 404 error if I try to access a URL without including the hashtag symbol

Is it feasible to display a record by directly inputting the user ID in the URL without using the # symbol? I am currently working on a website where I have a single view page named Login.html. I want to be able to access this page by entering the user&ap ...

angularjshtmlurlurl-routingangularjs-routing

Google has not detected any hreflang return tag

My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...

htmlseogoogle-searchcanonical-linkhreflang

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

What steps can be taken to address the ElementNotInteractableException error thrown by the sendKeys function in Selenium WebDriver?

In my quest to improve my skills in Selenium WebDriver, I decided to test my abilities by visiting the Twitter login page and attempting to log in. After some trial and error, I was able to successfully navigate to the page and locate the desired element f ...

javahtmlseleniumselenium-webdriversendkeys

JavaScript: Retrieving the following element from the parent container

Is there a way to prevent the next element within the parent tag from being enabled or disabled based on a certain condition? HTML: <span> <input type="checkbox" onchange="toggleInput(this)"> </span> <input type="text" ...

javascripthtml

The W3C validator does not recognize any modifications made after jQuery and JavaScript have been applied

My goal is to ensure that my website passes all errors on the W3C Validator. I have encountered a few errors related to the alt text of images. In an attempt to address this issue, I wrote and added the following code to the <head> <script type=" ...

javascriptjqueryhtmlw3c-validation

Setting a fixed height for layout with scroll functionality in Twitter Bootstrap 3.2.0

I am currently working on a design layout using bootstrap 3.2.0. I have managed to create a Fixed header and footer, and I am now facing the challenge of having a full-height container with independent scrollbars. Are there any effective methods in Twitter ...

htmlcsstwitter-bootstrap-3

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to ach ...

htmlcss