Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Is there a way to convert an html element into a link using CSS?

Hello,

Is there a way to convert an html element into a link using CSS?

Example:

I have a DIV element which has heading and paragraph and I would like to have the whole element with the child elements to be a clickable link without modifying the HTML dom with a href tags.

<div id="link-selector">
  <h2>Hello World</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </p>
</div>

CSS might look something like this (assuming there is a command similar to this)

#link-selector {
  make-link: true;
}

If I would be working with normal HTML, CSS and JQUERY project I would be using JQ with a code something like this:

$("#back-to-top").click(function() {
    $('html, body').animate({
        scrollTop: $("body").offset().top
    }, 1000);
});

But since I work with WordPress site I don't want to have JQUERY involved as it really looks to be PIA to have it work properly.

NOTE: The site that I'm talking about is http://www.apc.fi/sivudata/kauppa/. I need to have all those hexagons a clickable link that will take the user to a product page.

Really need your help here guys! <3

1 Answer

No, there is no css for this. you could just wrap the whole div with the anchor tag.

Just got help from StackOverFlow where someone suggested using pure javascript

<div id="link-selector" onClick="location.href='#anchor'">

Looks like simple and amazing solution. I'm wondering will this method have any compatibility issues with older browser or does the user have Java installed in his machine so that this will work?