Question

以下是我的方案：使用div创建了CSS，并在X之前的右上角添加了pseudo-class。如何在javascript的帮助下点击X来关闭此div？

CSS

.validation-summary-errors{
    position: absolute;
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: #000 solid 1px;
    box-shadow: #232323 1px 1px 6px;
}

.validation-summary-errors:before {
    display: block;
    content: "X";
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    width: 29px;
    box-sizing: border-box;
}

视图中的HTML（编辑）

 <div class="message-error">  

                            @validationSummary

                    </div>

Answer 1

:before是一个伪元素，无法在DOM中访问。取而代之的是具有这些风格的span或div，并使用它click事件。

注意：只需确保为span.close定义了CSS： - ）

解决方案1：如果您可以修改HTML。

＆＃13;

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

＆＃13;

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

＆＃13;

解决方案2：如果动态创建HTML。

＆＃13;

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

＆＃13;

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

＆＃13;

Answer 2

您可以使用pointer-events css属性忽略父级的点击，而不是伪元素的点击。这样你就可以在父元素上有一个点击监听器，它只能由伪元素触发。

如果您需要在父级上为其他原因允许指针事件，这将是一个问题。

fiddle

Answer 3

伪元素不在DOM中。你可以通过getComputedStyle方法阅读它，但不能操纵它。

而不是创建一个绝对定位的div，包含链接到前类的X OR。将听众设置为该div。

如何在css选择器上应用jQuery：之前

3 个答案: