css 如何将a标签用作div的背景

42fyovps 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(145)

我一直在思考一个简单的问题。我有一个div需要可点击，这意味着我必须在<div>中放入一个<a>标记。我不能将整个内容放入<a>标记中，因为这个组件中的文本包含了更多的内联<a>标记。（我发现不能嵌套<a>标记）。因此，我认为将<a>标记与<div>结合起来，并设置<a>标记的样式，使其作为<div>的背景，其他包含内联<a>标记的文本显示“clickable background”的 ontop。但是我不能设置它的样式，使其作为背景。我的css知识相当有限，我认为结合使用display: block和padding: 100%可以解决这个问题。这只会弄乱整个布局，即使在我的html中移动<a>标记时也是如此。下面是相关代码：
CSS：

.clickable {
    background-color: $color-accent-white;
    display: block;
    padding: 100%;
}

于飞：

<events>
    {{#each events}}
            <div>
                <section>
                    <div class="row">
                        <a class="clickable" href="{{ link }}" <!-- The culprit! -->
                           {{#if link_target}}target="{{ link_target }}"{{/if}} data-show-until="{{ show_until }}"></a>
                        <div class="col-12 col-md-4">
                            {{> [content/content_picture]
                                large=image.large
                                alt=image.alt
                                link=null
                            }}
                        </div>
                        <div class="col-12 col-md-8">
                            <p class="mb-0">
                                <small>
                                    {{ subline }}
                                </small>
                            </p>
                            <p class="h3">
                                {{ headline }}
                            </p>
                            {{{ text }}}
                        </div>
                    </div>
                </section>
            </div>
    {{/each}}
</events>

我已经尝试了各种不同位置、不同显示模式和不同填充的组合。如何使我的<a>标签适合其父标签<div>的大小呢？

css

来源：https://stackoverflow.com/questions/74446378/how-to-make-an-a-tag-function-as-a-background-to-a-div

3条答案

按热度按时间

z2acfund1#

您可以为div指定一个onclick属性，该属性触发一个javascript函数来更改页面。

赞(0）回复(0）举报 2022-11-19

webghufk2#

对于那两个说要在div中添加一个点击监听器的人来说，这在我的情况下不起作用，因为样式的原因，并且需要div中的文本也是可点击的。为了解决这个问题，我首先必须将父对象的位置设置为相对的，并且将可点击的<a>标记的位置设置为绝对位置。为了使内联链接也能被点击，我不得不将这些链接的z-索引设置得更高，这意味着我首先必须选择每个<a>标签，将它们的z-索引设置到前面，然后覆盖可点击的背景，使其比前面低一个索引。代码如下：
CSS：

a {
        z-index: 11;
        position: relative;
    }

    &-clickable {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

于飞：

<events>
    {{#each events}}
    <div>
        <section class="event mb-3 p-1">
            <a class="event-clickable" href="{{ link }}"
                     {{#if link_target}}target="{{ link_target }}"{{/if}} data-show-until="{{ show_until }}"></a>
            <div class="row">
                <div class="col-12 col-md-4">
                    {{> [content/content_picture]
                        large=image.large
                        alt=image.alt
                        link=null
                    }}
                </div>
                <div class="col-12 col-md-8">
                    <p class="mb-0">
                        <small>
                            {{ subline }}
                        </small>
                    </p>
                    <p class="h3">
                        {{ headline }}
                    </p>
                    {{{ text }}}
                </div>
            </div>
        </section>
        </div>
    {{/each}}
</events>

赞(0）回复(0）举报 2022-11-19

5lhxktic3#

向要更改的div添加CSS类型。首先，在HTML代码中找到div，并向开始标记添加分类。...向CSS代码添加新的类型选择器。接下来，转到CSS代码并添加新的分类选择器。...选择新的历史颜色。

赞(0）回复(0）举报 2022-11-19