代码之家 › 专栏 › 技术社区 › irishbuzz

在超链接区域中显示链接

css html

irishbuzz · 技术社区 · 14 年前

遇到了一个有趣的问题,我受不了了。

基本上,在我们的一个页面上,我们有几个超链接的区域。这些区域不仅可以在有文本的地方单击,而且可以通过设置链接在整个背景中单击 display:block . 您可以看到这样一个可点击区域的简单示例 here .

所以最近的权力要求我在这个领域添加另一个链接。内部链接将有一个不同的目标到可点击区域,并且只能点击它的即时文本,其余的可点击区域将围绕它。你可以看到这个怎么搭配在一起 demo (黄色位表示内部链接的可点击部分,红色表示外部链接)。注: 我意识到这看起来是一个非常混乱的实现,但我担心这是我无法控制的。

根据设计(出于合理的理由),我不能简单地 <a> 标签如下:

<a href="#" class="clickable_area">
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <a class="inner_link" href="#">Yellow background and it's own link</a><br/>
</a>

尝试嵌套这样的标记会导致第一个实例过早关闭外部链接 </a> 如所见 here .

一种解决方案可能是使内部链接成为一个span元素,然后使用onclick事件通过javascript来执行超链接,但我不太了解这种方法,我更愿意避免任何javascript解决方案。

我试过用CSS等来解决问题,但到目前为止我还是觉得很无聊。我觉得绝对定位或负边缘可能是关键,但我也从来没有擅长过。

如果有人能提出任何建议,我会非常感激的。

4 回复 | 直到 14 年前

Diodeus - James MacFarlane 14 年前

不能嵌套链接。我的建议是将内部链接绝对定位在外部区域的顶部,有点像这样:

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>

Martin Algesten 14 年前

不能嵌套链接,但使用绝对定位。

<div id="wrapper">
  <a id="bigred" href="...">Big clickable area</a>
  <a id="yellow" href="...">Yellow background link</a>
</div>

CSS

#wrapper {
  position: relative;
  height: 300px;
  width: 500px;
}

#bigred {
  background: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 500px;
}

#yellow {
  background: #ffff00
  position: absolute;
  top: 30px;
  left: 30px;
}

两个链接都可以点击。由于源顺序,黄色被绘制在红色的顶部。如果您更改订单,您将需要使用 z-index 控制在其上显示的内容。

Michael 14 年前

下面是一个工作示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>

    <div class="container">
        <a href="#" class="clickable_area">
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
        </a>
        <a class="inner_link" href="#">Yellow background and it's own link</a>
    </div>

</body>
</html>

stevelove 14 年前

我会用一个DIV来包装你的链接。这就是你想要的吗? http://jsfiddle.net/wcCMC/3/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前