点击一个链接，是一个div后面？

StackOverflow https://stackoverflow.com/questions/1198416

  •  20-09-2019
  •  | 
  •  

题

我不知道标题充分描述，我发现自己与......问题

基本上，我在重新设计自己的网站和我碰到的一个问题的过程是，在我的投资组合的图库查看你获得图像的网格对我的作品的片断在一个框架。

当将光标悬停在该帧中的图像是隐藏的，标题，客户端，类别和年被示出。

然而，存在应是位于高于一切和是可点击的链接。然而，上述信息位于在图像上，即使它是在它下面的标记。

我猜这有是与驻留在该绝对定位一个DIV（这使得它能够在框架的顶部和坐因此，有必要）的上述信息。

我想实现的是让整个画面可以点击的，当你在它悬停，甚至被DIV覆盖的区域。请让我知道这是不明确......

您可以在这里看到活动的网站： http://www.designbyadmiral.com/

我敢肯定，这将有助于清除一些东西。

有帮助吗？

解决方案

要完成这件事，你可能需要修改大量的代码（因为我犯了一个解决办法，但没有找到任何简单的解决方案）。如果你没有任何特别的理由使用锚（除主另一个：使用达姆锚的链接！）休耕段应工作：

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

好运。

其他提示

您似乎是使用jQuery插件的所有UI的东西，所以它可能是很难定义的行为。

做最简单的事情将是一个click事件添加到其使用的底层链接的href导航到另一个页面的叠加DIV：

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

我实现所期望的结果与此标记，并且没有的javascript：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<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"/>
            <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"/>
            <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>

不知道为什么它不能在你的网页上工作;但我不认为你应该使用JavaScript这样一个简单的任务。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top