Question

I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/（页面底部 - 驱逐出境图片）

我想添加一个链接，但我的标签不起作用。我应该如何实现它（1）具有翻转效果，以及（2）有链接？

CSS：

<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
    <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
        <div class="mask"></div>
    </a>
    <p>
        <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense"></a>
    </p>
    <div class="content">
        <h2>Deportation Defense</h2>
    </div>
</div>

HTML：

    <div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
    <img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
    <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
        <div class="mask"></div>
    </a>
    <div class="content">
        <h2>Deportation Defense</h2>
    </div>
</div>

Answer 1

标题为“CSS”的代码是HTML，因此我假设它是您网页的HTML代码。

如果您对HTML标记没有任何限制，请执行以下操作并确保将带有h2的DIV包装在某个位置的锚点中：

<a href="...">
    <div class="content"><h2>Deportation Defense</h2></div>
</a>

目前，您的主播包围没有内容（不可点击）的内容，另一方的内容未正确包装在主播中（因此无法点击）。

Answer 2

您可以尝试将<a>标记包裹在整个部分中，如下所示：

<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
   <img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
   <div class="mask"></div>
   <p>
     <a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense"></a>
   </p>
   <div class="content">
       <h2>Deportation Defense</h2>
   </div>
</a>

CSS和<a href=""> issue

2 个答案: