Question

我有几张图片，图片中有一个链接（文字）。

但是我希望文本和图像都可以点击而不仅仅是文本。

这是我的代码：html：

<div id="testimage">
  <div id="a1"><a href="http://mja.co.uk/">Awards</a></div>
</div>

（另一张图片）：

  <div id="testimage1">
  <div id="a2"><a href="http://mja.co.uk/Events">Events</a></div>
 </div>

的CSS：

  #testimage {

   background-image: url(images/mja1.jpg);height: 205px;width: 322px;   
 }
 #a1 a
 {position: absolute;font-size: 25px;color: #085da2;top: 503px;}
 #a1 a:hover
 {color:#085da2;opacity:0.5;}

你可以看到a1有一个链接，但我也需要一个指向testimage的链接。

我试过了：

HTML

 <a href="http://mja.co.uk/Events"><div id="testimage"></div></a>

CSS

 a{ display:block; }

这个;当我添加第二张图片时，整个页面开始变得不同了。

所以我希望有一个div的链接。

Answer 1

我认为这就是你所需要的。

<a href="http://mja.co.uk/Events">
    <img src="images/mja1.jpg"/>
    <span id="a2">Events</span>
</a>

Answer 2

a { display: inline-block }会将链接的可点击区域“展开”为其包含元素的完整大小，在本例中为<div>，但仍保留布局。

Answer 3

将div包装在一个标签中...... <a href=""><div id="whatever">The text</div></a>

链接2个div而不是仅文本

3 个答案: