Question

我有一个li项，里面有多个内容。它将是缩略图和简短描述，a内的li标记使得所有内容成为链接（缩略图，空格和描述），缩略图内部将成为需要的Facebook共享图标点击进入分享链接。

但由于它全部包含在a标记中，因此Facebook共享图标周围的a标记会杀死外部标记...

这是html：

<li><a href="">
    <div class="image-thumbail>
        <div class="share-icons-thumb">
            <a href="fb.link"><i class="fa fa-facebook"></i></a>
            <a href="twi.link"><i class="fa fa-twitter"></i></a>
        </div>
    </div>
    <div class="events-text">
    <h1>Event Name</h1>
    <h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
    <p>Lorem ipsum dolor sit amet, elit, sed diam
    nonummy nibh euismod tincidunt ut...</p>
    <br>
    <h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
    </div>
</a>
</li>

我还在图片中嘲笑了一个简单的示例：

所以我希望红色圆圈带您进入FB共享链接，以及其他所有内容将您带到外部a标记链接..........

这可能吗？

任何想法/帮助都会很棒，谢谢！

Answer 1

在你的例子中有一堆奇怪的嵌套会给你带来麻烦。我甚至无法使主a元素正常工作。我建议添加一个动作按钮，而不是让整个“卡”可点击。但是，您可以使用JavaScript来处理卡片点击。这可能有所帮助。

HTML：

<div class="card">
    <div class="image-thumbnail">
        <div class="share-icons-thumb">
            <a class="link-fb" href="http://example.com"><i class="fa fa-facebook">f</i></a>
            <a class="link-twitter" href="http://example.com"><i class="fa fa-twitter">t</i></a>
        </div>
    </div>
    <div class="events-text">
        <h1>Event Name</h1>
        <h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
        <p>Lorem ipsum dolor sit amet, elit, sed diam
            nonummy nibh euismod tincidunt ut...</p>
        <br />
        <h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
    </div>
</div>

CSS：

.image-thumbnail {
    background: aqua;
    width: 120px;
    height: 80px;
    position: relative;
}
.card {
    font-size: smaller;
    width: 200px;
    cursor: pointer;
}
.share-icons-thumb {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 2;
}
.share-icons-thumb a {
    color: white;
    background: blue;
    padding: 1px 5px;
    margin: 0 2px;
}

JS：

$(function() {
    $('.card').on('click', function() {
        window.location = 'http://google.com';
    });
});

http://jsfiddle.net/a0fncyvs/

小提琴中的脚本不允许window.location调用，我为FB和Twitter链接添加了单击处理程序，仅用于显示，因此您实际上不会在此重定向。

我希望有所帮助。

Answer 2

我过去使用的解决方案是将内部＆lt; a＆gt;带入。使用比外部＆lt; a＆gt;更高的z-index以堆栈顺序前进的元素。标签，例如。 z-index：2这将使内部标签可选。例如，将以下内容添加到CSS中，原始HTML将按预期工作。

.share-icons-thumb a {
  z-index: 2;
  }

<li><a href="">
                <div class="image-thumbail">
                    <div class="share-icons-thumb">
                        <a href="fb.link"><i class="fa fa-facebook"></i></a>
                        <a href="twi.link"><i class="fa fa-twitter"></i></a>
                    </div>
                </div>
                <div class="events-text">
                <h1>Event Name</h1>
                <h2><i class="fa fa-calendar"></i> 28/03/2015 - 13:00</h2>
                <p>Lorem ipsum dolor sit amet, elit, sed diam
                nonummy nibh euismod tincidunt ut...</p>
                <br>
                <h3><i class="fa fa-location-arrow"></i> Location 2021</h3>
                </div>
            </a>
            </li>

<a> tag inside an </a> <a> tag?</a>

2 个答案: