Question

我不确定这个标题是否充分描述了我发现自己的问题......

基本上，我正在重新设计我的网站，我遇到的一个问题是，在我的投资组合的图库视图中，您可以在一个框架内获得我的工作图像的网格。 / p>

当您将鼠标悬停在框架上时，图像将被隐藏，并显示标题，客户端，类别和年份。

但是，应该是一个位于所有内容并且可以点击的链接。但是，上面的信息位于图像上，即使它在标记中位于图像下方。

我猜这与驻留在绝对定位的DIV中的上述信息有关（这使得它可以位于帧的顶部，因此是必要的。）

我想要实现的是当您将鼠标悬停在整个框架上时，即使是DIV所覆盖的区域，也可以将整个框架点击。如果不清楚，请告诉我......

您可以在此处查看该网站：http://www.designbyadmiral.com/

我相信这有助于澄清一些事情。

Answer 1

您似乎正在为所有UI内容使用jQuery插件，因此可能很难自定义行为。

最简单的方法是向覆盖div添加一个click事件，该div使用底层链接的href导航到另一个页面：

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

Answer 2

要完成这项工作，您可能需要修改大量代码（因为我做了一个解决方法，找不到任何简单的解决方案）。如果你没有任何特殊的理由使用锚（除了主要的一个：使用damm锚作为链接！），那个休闲片段应该可以工作：

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

祝你好运。

Answer 3

我使用此标记实现了预期的结果，并且没有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来完成这么简单的任务。

单击div后面的链接？

3 个答案: