ansaurus

Question

[CSS] Clicking a link that's behind a div?

Answer 1

+2 A:

You seem to be using jQuery plugins for all UI stuff, so it may be hard to customize the behavior.

The simplest thing to do would be to add a click event to the overlaying div which uses the href of the underlying link to navigate to another page:

$("#topdiv").click(function() { 
   window.location = $("#originallink").attr("href"); 
});

Philippe Leybaert 2009-07-29 07:12:59

Answer 2

+1 A:

To get this done, you'll probably need to modify a lot of code (since I made a workaround and couldn't find any simply solution). If you don't have any special reason to use an anchor (other than the main one: use the damm anchors as links!) the fallowing snippet should work:

$(".project").each(function(){
    var url = $(this).children('.project-link').attr('href');
    $(this).css('cursor', 'pointer');
    $(this).click(function(){
        window.location = url;
    });
});

Good luck.

Nathan 2009-07-29 07:36:28

Answer 3

A:

I'm achieving the desired result with this markup, and no javascript :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title></title>
<style type="text/css">
ul { list-style: none }
li { float: left }
li a { display: block; position: relative; text-decoration: none; color: #5e5d56; }
li a img, li a div { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 13px; border: none; }
li a img { z-index: 2; }
li a:hover img { display: none }
li a div { background: #b8b7af; padding: 20px; z-index: 1; }
</style>
</head>
<body>
<ul>
    <li>
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:523px">
      <img width="432" height="497" alt="Maclure Library site redesign screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/maclure-2-screenshot-1.jpeg"/&gt;
      <div class="project-information">
        <h3>Maclure Library Site Redesign</h3>
       <dl>
        <dt>Client</dt>
        <dd>Maclure Library</dd>
        <dt>Year</dt>
        <dd>2009</dd>
        <dt>Category</dt>
        <dd>Web</dd>
       </dl>
      </div>
     </a>
    </li>
    <li>
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:499px">
      <img width="432" height="473" alt="Infamy homepage screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/infamy-website-1-homepage.jpeg"/&gt;
      <div class="project-information">
        <h3>Infamy Website Design and Development</h3>
       <dl>
        <dt>Client</dt>
        <dd>Schadenfreude Productions Ltd.</dd>
        <dt>Year</dt>
        <dd>2008</dd>
        <dt>Category</dt>
        <dd>Web</dd>
       </dl>
      </div>
     </a>
    </li>
</ul>
</body>
</html>

Not sure why it doesn't work on your page ; but I don't think that you should have to use javascript for such a simple task.

Alsciende 2009-07-29 08:11:32

I might resort to doing something like this but the reason I hadn't yet is because you can't have a DIV inside an anchor tag, just as you can't have an H3 or DL inside an anchor tag. This was the first solution I tried.

2009-07-29 15:38:12

ansaurus

tags:

views:

answers:

[CSS] Clicking a link that's behind a div?

related questions