减少图像的可点击区域

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

  

我正在尝试将超链接区域缩小为背景图像。

您的标记对于您正在显示的内容来说非常复杂。

你可以拥有类似的东西：

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

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

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

Answer 2

我会为你的按钮使用单个链接标记，并利用CSS渐变作为背景：

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.button {
  background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
  background-size: 100% 200%;
  border-radius: 4px;
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
  transition: all 150ms ease-in-out;
}

.button:hover,
.button:focus,
.button:active {
  background-position: 0 50%;
}

.button-icon {
  float: left;
  margin-right: 15px;
}

.button-content {
  overflow: hidden;
}

.button-title {
  font-size: 18px;
  font-weight: bold;
}

.button-description {
  font-size: 16px;
}

<a class="button" href="../Collin/misc/issues/index.html">
  <div class="button-icon">
    <img src="http://satyr.io/72/white?brand=github" alt=""/>
  </div>
  <div class="button-content">
    <p class="button-title">Ask Facilities</p>
    <p class="button-description">Here will be text about the button…</p>
  </div>
</a>

此处http://jsbin.com/rikisemawe/edit?html,css,output

Answer 3

OP中的元素堆叠在标记中，没有按钮的嵌套组件。这可以解释不寻常的位置坐标和大填充。 而不是<img>，而是使用background-image。将部分代码更改为真实<button>，<h4>而非<p>等。

段

.button {
  position: relative;
  min-width: 350px;
  max-width: 100%;
  min-height: 95px;
  height: auto;
  padding: 5px 10px;
  border: 0 none transparent;
  border-radius: 6px;
  background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
  background-size: cover;
}
.background:hover .head {
  color: #d76e08;
}
.text {
  padding: 0 5px;
  position: absolute;
  left: 85px;
  top: 5px;
  text-align: left;
  color: #def;
  text-decoration: none;
}
.button:hover,
.text:hover {
  text-decoration: none;
  color: #def;
}
.button:hover .head {
  color: gold;
}
.icon {
  width: 75px;
  height: 75px;
  position: absolute;
  top: calc(50% - 37.5px);
  background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-sm-12">


    <button class="button">

      <div class="icon"></div>
      <a class='text'>
        <h4 class="head">Ask Facilities</h4>
        <p class="content">Here will be text about the button.</p>
      </a>

    </button>

  </div>
</div>