html - 减少图像的可点击区域

Question

我使用按钮创建了一个左侧导航栏。我正在尝试将超链接区域减少到仅背景图像。此外，我遇到的另一个问题是覆盖背景图像的元素优先于超链接，因此按钮实际上不可点击。引用页面 http://www.auburn.edu/administration/facilities/home-page/index.html

超链接区

这里是背景图片区域

.img-responsive {
    display: block;
    padding: 0;
    margin: 0;
}
.background:hover .head {
    color: #d76e08;
}
.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    color: white;
}
.icon {
    padding-top: 15px;
    padding-left: 40px;
}
.head {
    margin-top: -75px;
    padding-left: 120px;
}
.content {
    margin-top: -5px;
    padding-left: 120px;
    padding-right: 35px;
}



<div class="row">
    <div class="col-sm-12">
        <div class="background">
            <a href="../Collin/misc/issues/index.html">
                <img alt="background" class="img-responsive" src="buttons/images/button.png" />
            </a>
            <div class="overlay">
                <div class="icon">
                    <img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
                </div>
                <p class="head">Ask Facilities</p>
                <p class="content">Here will be text about the button. .</p>
            </div>
        </div>
    </div>
</div>

Answer 1

I'm trying to reduce the hyperlink area to just the background image.

对于要显示的内容，您的标记非常复杂。

你可以有这样的东西:

<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>

<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>

并使用 CSS 添加图像和渐变。