"Is it possible for an anchor tag to be clickable only if it is

I am puzzled by the HTML code below:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    */
  /*left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
<a class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

I am wondering why the <a> tag is no longer clickable in this instance. What could be causing this issue?

One workaround I discovered is changing the container to a div tag and placing an a inside it with specific styles applied:

.info-boxes a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;
}

However, I am interested in understanding the reason behind the <a> tag not functioning as expected in this scenario rather than just the solution to fix it.

Can anyone shed light on why the <a> tag is not behaving like one in the given example?

htmlcss

Answer №1

To ensure the a tag is clickable, remember to include the href.

If you choose not to use the href, the link will only act as a placeholder hyperlink. For more information, visit W3C

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);

/* global css */

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}
.col-md-4 {
  width: 33.33%;
  float: left;
}
.info-boxes {
  display: block;
  position: relative;
  background: #7accc8;
  padding: 2em 0;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes h5 {
  font-size: 30px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.info-boxes p {
  margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  /*position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    */
  /*left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);*/
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.info-boxes:hover {
  background: #f5989d;
}
.info-boxes:hover span {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  /*-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);*/
  -webkit-transition: all .3s ease .2s;
  -o-transition: all .3s ease .2s;
  transition: all .3s ease .2s;
  opacity: 0
}
.info-boxes span:after {
  right: initial;
  left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
  left: calc(100% + 10px);
  opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
  right: calc(100% + 10px);
  opacity: 1;
}
<a href="#" class="info-boxes">
  <h5>2200AED</h5>
  <p>5 Private Sessions / Validity: 2 Months</p>
  <span>Online Booking</span>
</a>

Answer №2

If you are unsure whether you need to navigate to another page or just perform an action upon clicking, it is recommended to use a button tag. Why? Well, using an anchor link <a> is suitable for directing to a new page by specifying the href property. However, if the element is clickable and intended to trigger an action without redirecting to another page, then opting for a button tag would be more appropriate.

Answer №3

Perhaps the a element is missing a href. I'm not sure if this was also the case in the original code, but it appears to address the issue.

After implementing your suggested code fix, which seemed to work for you, I didn't have success with it. It's possible that you included a href attribute when modifying the HTML.

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

ngStorage - Revert to original settings

In my web application, I am relying on ngStorage for storing data. Here is the snippet of code that I am currently utilizing to verify if the $localStorage object has been defined: if ( angular.isDefined($localStorage.settings) ) { $scope.app.setting ...

htmlangularjsng-storage

The JavaScript jump function quickly moves back to the top of the webpage

Issue Resolved To prevent the view from jumping to the top of the page, I have implemented three options: Set the href attribute to href="#!" Set the href attribute to href="javascript:;" Pass the object to the event-handler and preve ...

javascriptjqueryhtml

Troubleshooting the issue with the simple Angular material layout/flex example

I attempted to implement a basic layout/flex example from the Angular material design demo site: https://material.angularjs.org/latest/layout/container However, no matter what I try, the layout does not function as described and simply arranges the four ...

angularjscssflexboxangular-material

Stacking the FontAwesome icons on a PrimeNG button

I've been experimenting with various methods to incorporate stacked icons on a pButton in Primeng, but I haven't had any success. Does anyone have a solution that doesn't result in the button being twice its normal height? Here are a couple ...

cssfont-awesomeprimeng

Eliminate the spacing between elements when they are in close proximity

I've noticed there is a margin between the buttons as shown below: .button + .button { margin-left : 1rem; } The buttons are contained within a <div class="row">, which will stack on top of each other on smaller screens: https://i.s ...

cssmargin

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss

Update the content according to the size of the screen

I'm currently working on a project where I need to redirect pages based on screen sizes. I have separate index files for the mobile and web versions of the website. In the web version's index file, I've added the following script: <scri ...

javascripthtmlmedia-querieswindow.location

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms

The server running on Linux suddenly experienced a glitch, causing Apache and

Greetings everyone and please excuse my English... I am encountering a peculiar issue with a website I have built using HTML and CSS Everything works perfectly on localhost... However, once I upload the site to the server, it initially works for a few s ...

htmlcssapache

Protected Bootstrap Environment

Bootstrap is an amazing tool, but it tends to enforce too many opinions. The selectors used in its rules are quite broad, such as input or label. Is there a method to isolate Bootstrap's CSS so that it only impacts elements within a container with a ...

javascriptcsstwitter-bootstrap

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

javascriptjquerycssvticker

ReactJS Feature: Split Screen that Can Be Moved

I am trying to create a screen with a split able and moveable feature, but I am facing difficulties in implementing it. I have tried using react split pane, but it is not working as expected. The functionality I am looking for is that when the user clicks ...

cssreactjssplit

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

htmlcssflexbox

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

When converting with wkhtmltopdf, elements may lose their original positioning

I am currently using wkhtmltopdf to create a .pdf file for printing HTML code. However, I am facing an issue where the HTML elements are getting rearranged and not staying in their original positions when I generate the pdf. Here is my code snippet for ge ...

phpcsswkhtmltopdf

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

Access the freshly launched URL

I am relatively new to PHP and have a table displayed on my webpage. Each row in the table has an auto-incremented rowid that is not being displayed. When clicking on a row, it opens a new page in the format of www.newpage.com/newpage/rowid. If I inspect ...

phphtmlurlseleniumrows

Modify content across various HTML pages using a central JavaScript file

I am in the process of updating my website, and I have multiple pages with a section that contains identical text. I want to be able to update this text easily from a master .js file named "my_info.js". To link to this file, I have inserted the following ...

javascripthtml

Can you add descriptive text below a linked image?

I am currently working with a customized CMS created specifically for our company. My goal is to insert text below the image displayed. Ideally, I would like the text to be centered within the border of the image if possible. I have limitations in that I ...

htmlimage

Is there unused space located at the bottom of the button?

Struggling to fix a coding issue related to formatting white space within a button. Sometimes the white space is at the top, other times at the bottom. Here's the CSS code that's not working #filter { position: relative; overflow: hi ...

htmlcss