0

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

基本上，我正在重新设计我的网站，我遇到的一个问题是，在我的作品集的画廊视图中，你会在一个框架内获得我的作品的图像网格。

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

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

我猜这与驻留在绝对定位的 DIV 中的上述信息有关（这允许它位于框架的顶部，因此是必要的）。

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

您可以在此处查看该网站的运行情况：http: //www.designbyadmiral.com/

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

4

3 回答 3

2

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

最简单的做法是向覆盖的 div 添加一个单击事件，该 div 使用基础链接的 href 导航到另一个页面：

$("#topdiv").click(function() { 
   window.location = $("#originallink").attr("href"); 
});
于 2009-07-29T07:12:59.450 回答
1

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

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

祝你好运。

于 2009-07-29T07:36:28.870 回答
0

我用这个标记实现了预期的结果，没有 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。

于 2009-07-29T08:11:32.170 回答