html元素背景使链接不可点击答案

【问题标题】：html element background makes link un-clickablehtml元素背景使链接不可点击
【发布时间】：2013-05-09 12:18:23
【问题描述】：

我有三个带有背景的链接<a> 元素，但由于背景与文本重叠，其中一半的链接不可点击。有谁知道解决办法吗？

这是我所做的一个例子

<html>
<head>
    <style>
    li     
    {   list-style-type:none;
        list-style:none;
        position:relative;
        height:100px;
    }
#middle
{   width:350px;
    background:url("images/middle.png");
    left:405px;
    height:250px;
    padding-top:50px;
    background-size:100%;
}
#left
{   left:275px;
    width:240px;
    height:150px;
    padding:150px 60px 0 0;
    background:url("images/left.png");
    background-size:100%;
}
#right
{   left:580px;
    width:235px;
    height:150px;
    padding:150px 0 0 70px;
    background:url("images/right.png");
    background-size:100%;
}
   #test
    {   height:325px;
    }
    .Item
    {   position:absolute;
    font-size:33px;
    float:left;
    margin:15px;
    font-family: Georgia, Times, "Times New Roman", serif;
    text-align:center;
}
    </style>
</head>
<body>
<ul id="test">
    <li id="left" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="middle" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="right" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
</ul>
</body>
</html>

【问题讨论】：

HTML 似乎已损坏。您有多个关闭 </strong> 标记，但没有打开 <strong> 标记来匹配它们。
@Boaz 是对的，通过validator.w3.org/#validate_by_input 运行它；从长远来看，纠正这些错误会有所帮助。
你为什么要使用休息时间。限制 a href 的大小会更有意义，添加 z-index 不会解决这个问题，正如 Boaz 所说，你有一些主要的编码问题。
我使用breaks的原因是因为图片背景是一大块圆形（像饼图），所以我需要线条在顶部长而在底部短。我试图发布实际的网站，但它把它变成了代码......我有一个托管的例子，说明我在这里做什么 www.jpginc.com.au/temp.html

标签： html css hyperlink overlap clickable

【解决方案1】：

像这样添加一个 Z-Index ：

#middle
{   width: 350px;
    background: url("images/middle.png");
    left: 405px;
    height: 250px;
    padding-top: 50px;
    background-size: 100%;
    z-index: 2;
}

【讨论】：

我玩过 z-index，但问题是无论我把哪个项目放在前面，它都会与其他项目重叠。这是我正在尝试做的事情 www.jpginc.com.au/temp.html 正如你所看到的，无论我使用什么 z-indexing，一些文本都会重叠......除非我错过了什么？
根据 z-index 的定义 - The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.，我将 z-index 值设置为一个大的负整数，并且我的链接变得可点击背景！

【解决方案2】：

也许您可以将三张图片合并为一张，如页面所示。然后使用新合并的图片作为背景图像开始布局。当我想建立我的网站时，我总是画我的网站的草图。我会将测试 div 视为一个整体并为其设置背景图像属性。为我的池表达式感到抱歉。希望能解决您的问题。

【讨论】：

这会起作用，除非我有一个 javascript 函数，当它靠近时将图片移向鼠标光标，所以我需要单独的图片。我真正需要的是只使文本可点击，而不是背景。这可能吗？