在css中为啥将z-index设置为-1后，超链接无效了,请问该怎么办？

Posted 2023-04-30

#banner width:100%; height:298px;background-image:url(img/banner1.png); margin:0; padding:0; /*border:1px solid rgba(0,0,0,0.4);*/ position:absolute; z-index:-1;

一般的div标签的z-index为1，你设置了-1，有可能是将这个div标签向下移了一层，而鼠标点击的时候只能点击到最上边一层的div。 参考技术A z-index表示元素的层级属性，数值为正且越大，层级越高，越排在上层，网页层级最低为0，也就是默认的，你为-1，那么就相当于在整个网页的里层了，怎么能点到 参考技术B 上传代码比较容易检查。
那部分的代码，不是运行结果。

如何防止超链接链接

【中文标题】如何防止超链接链接

【英文标题】：How to prevent a hyperlink from linking

【发布时间】：2010-09-08 03:21:12

【问题描述】：

是否可以防止 asp.net 超链接控件链接，即它显示为标签，而实际上不必用标签替换控件？也许使用 CSS 或设置属性？

我知道将其标记为禁用是可行的，但它会以不同的方式显示（灰显）。

为了澄清我的观点，我在页面顶部有一个用户名列表，这些用户名是使用用户控件动态构建的。大多数情况下，这些名称可链接到电子邮件页面。但是，如果用户已被禁用，则名称显示为灰色，但当前仍链接到电子邮件页面。我希望这些禁用的用户不要链接。

我知道我真的应该用标签替换它们，但这似乎不像使用 CSS 说（如果可能的话）删除链接能力那么优雅。它们已经以不同的颜色显示，因此很明显它们是禁用用户。我只需要关闭链接。

【问题讨论】：

阻止，您的意思是“阻止它作为链接出现”还是完全阻止它作为链接工作？

两者都有，但它已经不像链接了，这是用 CSS 完成的。我只需要让它不可点击。

生成此链接的代码已经非常复杂，如果可以避免的话，我不愿意通过在其周围添加条件代码以将其输出为标签而不是超链接来增加更多复杂性。

【参考方案1】：

这听起来像是 JQuery 的工作。只需为您希望删除 URL 的所有 HyperLink 控件指定一个特定的类名，然后将以下 JQuery sn-p 应用到页面底部：

$(document).ready(function() 
    $('a.NoLink').removeAttr('href')
);

类名称为“NoLink”的所有 HyperLink 控件将自动删除其所有 URL，并且链接看起来只是文本。

一行JQuery就可以解决你的问题。

【参考方案2】：

我很好奇你用它来完成什么。为什么要使用链接？

只是为了格式化吗？在这种情况下，只需在 HTML 中使用 并使用样式表使格式与链接匹配。

或者您使用链接并附加一个 onClick 事件，您“返回 false；”这将使浏览器不进行导航 - 如果启用了 JS。

但是：这不是让您的用户感到非常困惑吗？为什么要创建看起来像链接但什么都不做的东西？

你能提供更多细节吗？我有这种感觉，您正在尝试解决一个比破坏链接更好的解决方案的更大问题:-)

【讨论】：

我不希望它显示为链接或作为链接工作。我知道在这种特殊情况下它确实应该是一个标签。然而，所涉及的代码已经相当复杂，如果说 CSS 可以完成这项工作，我不愿意使用“if”语句增加更多复杂性。

【参考方案3】：

无论您进行何种设置，超链接控件都将呈现为“a”“/a”标签。您可以自定义一个 CSS 类，使链接看起来像一个普通的标签。

或者，您可以构建一个继承自 System.Web.UI.WebControls.HyperLink 的自定义控件，并覆盖 Render 方法

protected override void Render(HtmlTextWriter writer)
        
            if (Enabled)
                base.Render(writer);
            else
            
                writer.RenderBeginTag(HtmlTextWriterTag.Span);
                writer.Write(Text);
                writer.RenderEndTag(HtmlTextWriterTag.Span);
            
        

     

可能有点矫枉过正，但它会满足您的要求。

另外，我发现在我的项目文件中有一个基本的 asp:CustomHyperlink asp:CustomButton 类很有用。使在整个项目中定义自定义行为变得更加容易。

【参考方案4】：

如果您只是想修改链接的外观以免看起来像一个链接，您可以将“a”标签的 CSS 设置为没有下划线：

a: link, visited, hover, active 
    text-decoration: none;

虽然我建议不要在此处包含“悬停”，因为没有其他方法可以知道它是一个链接。

无论如何，我同意@pilif 的观点，这看起来像是一场等待发生的可用性灾难。

【参考方案5】：

如果你的意思是阻止链接激活，通常的方法是链接到“javascript:void(0);”，即：

foo

【讨论】：

我不认为将 javascript 放在 href 中是“正确的方式”，尽管它可以工作。

【参考方案6】：

这应该有效：

onclick="return false;"  

如果没有，您也可以将 href 更改为“#”。使其显示为文本的其余部分是 css，例如显示箭头而不是手是：

a.dummy   
    cursor:default;  
  

【参考方案7】：

感谢所有输入，看起来简短的回答是“不，你不能（无论如何也不是很好）”，所以我必须努力做到这一点并添加条件代码。

【参考方案8】：

如果您在 asp.net 中使用数据绑定，请处理数据绑定事件，如果该用户被禁用，则不要设置 NavigateUrl。

【参考方案9】：

您是否尝试过不设置 NavigateUrl 属性？如果未设置，它可能只是呈现为跨度。

【讨论】：

即使未设置 NavigateUrl，它也会呈现为 A 标签。

【参考方案10】：

.fusion-link-wrapper 指针事件：无；

【参考方案11】：

另一种解决方案是在您的超链接上应用此类。

.avoid-clicks 
  pointer-events: none;

【参考方案12】：

使用无 href 的 CSS 解决方案（如果 NavigateURL 绑定到 null/空字符串，则 asp:HyperLink 将生成）在视觉上与周围的文本无法区分：

a:not([href]), a:not([href]):hover, a:not([href]):active, a:not([href]):visited 
    text-decoration: inherit !important;
    color: inherit !important;
    cursor: inherit !important;

不幸的是，这不会告诉屏幕阅读器不要将其作为链接读出 - 尽管没有 href，它是不可点击的，所以我希望它不会被识别为这样。不过我还没有机会测试它。

（如果您还想对带有 href="" 的链接以及缺少 href 的链接执行相同操作，则还需要添加 pointer-events:none，否则空的 href 将重新加载页面。这个不过，肯定会让屏幕阅读器仍将其视为链接。）

在 OP 的用例中，如果您仍然从数据库中填充了 href，但有一个布尔值指示链接是否应该是“真实”链接，则应该使用它来禁用链接，并且将a:disabled 添加到上面的选择器列表中。然后禁用的链接也将看起来像纯文本而不是灰色链接。 （禁用链接也会向屏幕阅读器提供该信息，因此这比仅使用指针事件更好：无和类。）

注意事项 - 如果您在全局而不是为特定页面添加此类规则，请记住注意标签没有（有效）href 但您正在提供的情况点击处理程序 - 你仍然需要那些看起来/行为像链接的东西。