使 <a> 内的整个 <div> 可点击

Question

我正在尝试使 <a> 标签内的全部内容都可以点击，但现在只有文本。

这里有一个 CodePen：http://codepen.io/francobermudez/pen/dvBpNw?editors=1100

HTML:

<section id="ultimos-eventos">
    <div class="eventos-wrap">

        <a href="#">
            <div class="evento">
                <div class="evento-fecha">
                    <div class="evento-dia">20</div>
                    <div class="evento-mes">MAR</div>
                </div>
                <div class="evento-info">
                    <div class="evento-titulo">This is my title</div>
                    <div class="evento-subtitulo">
                        <div class="evento-direccion"><div></div>This is my subtitle</div>
                        <a class="btn-evento btn-azul" href="#">Detalles</a>
                    </div>
                </div>
            </div>
        </a>

    </div>
</section>

Answer 1

您在 link（"Detalles" 文本）中有一个 link - 无法工作。删除内部 link（即将其转换为常规文本 div 或 p 标签），您将能够单击整个容器。

<section id="ultimos-eventos">
    <div class="eventos-wrap">

        <a href="#">
            <div class="evento">
                <div class="evento-fecha">
                    <div class="evento-dia">20</div>
                    <div class="evento-mes">MAR</div>
                </div>
                <div class="evento-info">
                    <div class="evento-titulo">This is my title</div>
                    <div class="evento-subtitulo">
                        <div class="evento-direccion"><div></div>This is my subtitle</div>
                        <div>Detalles</div>
                    </div>
                </div>
            </div>
        </a>

    </div>
</section>

http://codepen.io/anon/pen/GWbNjN?editors=1100

使 <a> 内的整个 <div> 可点击

Make entire <div> inside <a> clickable

html

css

anchor