时间戳

首页 > 解决方案 > 单击关闭按钮后，如何删除基于 FontAwesome 的警报框背景？

jquery - 单击关闭按钮后，如何删除基于 FontAwesome 的警报框背景？

问题描述

我的网站上有一些警告框。当有人单击警报框右上角的关闭按钮时，我需要基于 FontAwesome 的背景消失。

警报框的图像

我的警报框有以下代码：

<div id="system-message">
    <div class="alert alert-notice">
        <a class="close" data-dismiss="alert" aria-label="">×</a>
        <h4 class="alert-heading">Warning</h4>
            <div>
              <div>blah blah blah.</div>
            </div>
    </div>
<div>

创建背景的代码是这样的：

div#system-message:before {
    position: absolute; top: 30px; right: 100px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 72px;
    line-height: 1;
    opacity: .1;
  content: "\f00c"; z-index: 1;}

当我关闭警告框时，Font-Awesome 背景仍然可见！我怎样才能防止这种情况？在 CSS 中插入一些：在选择器之后？但是怎么做？

有好心人能帮帮我吗？干杯。

标签： jqueryhtmlcssbootstrap-4

解决方案

这是因为在您的 CSS 中，附加背景是#system-message父元素。您必须按如下方式更改代码：

div#system-message>alert:before {
    position: absolute; top: 30px; right: 100px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 72px;
    line-height: 1;
    opacity: .1;
  content: "\f00c"; z-index: 1;}

如果您不想在每个警报上重复背景，您可以添加:first-child选择器。

推荐阅读