Icon that can be clicked before

I'm struggling to figure out how to make the link icon in my code clickable so that users can click anywhere within the card to navigate to another page. I experimented with (" attr(href) ") but it resulted in adding the URL text next to the icon, which is not what I was aiming for. Is this functionality achievable? I came across other posts mentioning it might be a bug. Can anyone confirm if that is still the case?

:root {
    --secondary-color: #4b4945;
    --light-text-color: #fafafa;
    --dark-text-color: #37332f;
    --norm-text-color: #4b4945;
    --bg-med: #efefef;
    --primary-color: #492365;
    --primary-header: #492365;
    --solid-button-text: #fafafa;
    --solid-button-text-hover: #120919;
    --hollow-button-text: #120919;
    --primary-lighter-1: #5b3974;
    --primary-lighter-2: #6a4b81;
    --primary-lighter-3: #a491b2;
    --primary-lighter-4: #d2c8d9;
    --primary-lighter-5: #e4dee8;
    --primary-lighter-6: #ede9f0;
    --primary-darker-1: #42205b;
    --primary-darker-2: #371a4c;
    --primary-darker-3: #251233;
    --primary-darker-4: #120919;
    --hover-shadow: 0px 0px 5px 0px #492365;
    --border-color: #492365;
    --banner-overlay: rgba(73, 35, 101, 0.65);
    --inset-shadow: none;
    --outset-shadow: none;
    --flat-border: 2px solid;
}

.container {
    max-width: 80rem;
    padding: 1rem;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.card {
    border: 2px solid;
    border-color: #492365;
    background-color: #492365;
    box-shadow: none;
    border: var(--flat-border);
    border-color: var(--border-color);
    box-shadow: var(--outset-shadow);
    background-color: var(--primary-color);
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    margin: 0;
}

.card>p:last-of-type {
    margin-bottom: 1rem;
}

.card>p:last-of-type.card__title {
    margin: 0;
}

.card__image {
    background-color: #fefefe;
}

.card__image>img {
    width: 100%;
}

.card__image.--icon {
    background-color: #492365;
    background-color: var(--primary-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.card__content {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    background-color: #fefefe;
    word-break: break-word;
}

.card__content>div {
    flex-grow: 1;
}

.card__content>p:last-child {
    margin-bottom: 0;
}

.card__title {
    background-color: #492365 !important;
    color: #fafafa !important;
    padding: 0.5rem 1rem !important;
    background-color: var(--primary-color) !important;
    color: var(--solid-button-text) !important;
    margin: 0 !important;
}

.card__buttons {
    background: #fefefe;
    padding: 0.5rem 1rem;
    position: relative;
    display: flex;

 [...]

<div class="container">
  <div class="card --linked">
    <a href="https://stackoverflow.com/">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

htmlcsspseudo-element

Answer №1

If you want to make it work, simply apply the classes card --linked to the <a> element (nested inside one level deeper):

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="link">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

Additionally, remember to define the data-pseudo-text attribute within the same <a> element:

:root {
    /* CSS Custom Properties */
}

/* Other Styles */

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="this is your pseudo text">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

Answer №2

<div class="container">
<a href="https://example.com/">
  <div class="card --linked">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
  </div>
 </a>
</div>

The placement of the anchor tag is crucial for connecting the element to the desired link

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

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

htmlcss

Automatically redirect to the linked page once the video concludes

Would it be feasible for a html5 video to trigger the opening of a new page upon completion? What would be the approach to achieve this using javascript? ...

javascripthtml

Set the datepicker to automatically show today's date as the default selection

The date picker field is functioning correctly. I just need to adjust it to automatically display today's date by default instead of 1/1/0001. @Html.TextBoxFor(model => model.SelectedDate, new { @class = "jquery_datepicker", @Value = Model.Selecte ...

javascriptjqueryhtmldatepicker

Identify input elements that specifically contain an onclick event

Several of the input elements on my page have a function called setSomeFunction() that either shows or hides certain divs when clicked. I know I can locate all the input elements using document.getElementsByTagName("input") and store them in an array. How ...

javascripthtmlgetelementsbytagname

Angular 4's Panel Window: A User-Friendly Interface

Having experience with Adobe Flex, I am familiar with creating new panel windows in Action Script by using the 'new' keyword and popping them up using popups. The customization of these windows was achieved through functions provided in the Panel ...

javascripthtmlangularjs

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

htmlselectdrop-down-menubindingknockout.js

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

Send an AJAX request to redirect to a different page on a PHP server

After collecting data from JavaScript, my page transfers it to PHP and then MySQL. The issue arises when I want the page to redirect to different pages based on the database content. I attempted to use the header function, but it only displayed the entire ...

javascriptphphtmlajax

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

A completely css-based interpretation of google images

I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . U ...

htmlcssflexbox

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Tips on getting your card to stay at the top

Screenshot of webpage HTML (EJS): In the HTML file, look for the section after <%- include("navbar.ejs") -%> inside the body tag. The ".cardholder" contains "anime-card" templates (card.ejs). The first and last div within ".cardholder" are ...

htmlcssnode.jsexpressejs

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

javascripthtmlcssangularjsgoogle-apps-script

Decoding Labels for Content

Recently, I've been working on a VBA script that scrapes company reporting dates from the London Stock Exchange website. However, I encountered an issue as they have made changes to their web query interface. So, I've been trying to tweak the scr ...

htmlexcelvbatags

Manipulate container (div) to reveal and conceal

My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated ...

jqueryhtmlcssangularjs

Navigate to a different page using a sliding transition

Currently, I am working on a project using jquery-mobile where I need to redirect to another page after clicking on an image with a delay. This is what I have done so far: setTimeout(function(){ window.location.href = "myPage.html"; }, 1000); While t ...

jqueryhtmljquery-mobile

Is there a way to extract and exhibit the text from an image using Python?

Could someone assist me in extracting only the text within the highlighted red area? I have been experimenting with Python but haven't been successful in achieving this. My goal is to create a script that prompts for an address, then opens Firefox (or ...

htmlpython-3.xseleniumtextdisplay

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

javascriptcssreactjsscrollnext.js

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

cssvue.jsnpmwebpackvue-cli

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

htmlcssangular