Question

大家好，我感到困惑，为什么css无法正常工作后让我显示我的代码

  <div class="append"></div>
  <button type="submit" onclick="submit()"></button>

我的javascript

  function submit(){
        var str="<div class='agent'>"
        str +="<div class='col-md-3 disabledagent' >"
        str +="<div class='disabled-agent-label'><span><b>Disabled</b></span></div>"
        str += "<div class='agent-name col-md-6'>"
        str += "<span class='agent-ip'>Jhony test</span>";
        str += "</div>";        
        str +="</div>"
        str +="</div>"
     $(".append").append(str)
  }

我的CSS是

  .disabledagent {
     position: relative; 
     margin-bottom:15px;
  }
 .disabledagent::after { 
    content: "";
    opacity: 0.5;
    position:absolute; 
   }

.disabled-agent-label {
   z-index: 10;
   position: absolute;
   height: 100%;
   width: 100%;
   text-align: center;
   padding-top: 30%;
}

我的问题是我的.disabledagent :: after不起作用，我的意思是我没有达到不透明度0.5，有人可以告诉我我做错了什么吗？

Answer 1

这里有两个问题。首先，您创建一个HTML字符串，但不对其进行任何操作；您需要将其添加到DOM，大概是将其附加到.append。

第二，您创建的:after伪元素没有内容，因此似乎没有褪色。您需要将content设置为在元素中显示，如下所示：

$('button').on('click', function() {
  var str = '<div class="agent">';
  str += '<div class="col-md-3 disabledagent">';
  str += '<div class="disabled-agent-label"><span><b>Disabled</b></span></div>';
  str += '<div class="agent-name col-md-6">';
  str += '<span class="agent-ip">Jhony test</span>';
  str += '</div></div></div>';
  $('.append').append(str);
});

.disabledagent {
  position: relative;
  margin-bottom: 15px;
}

.disabledagent::after {
  content: "This content will be 0.5 opacity";
  opacity: 0.5;
  position: absolute;
}

.disabled-agent-label {
  z-index: 10;
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append"></div>
<button type="submit">Append...</button>

最后，请注意，我更改了您的逻辑以使用不引人注目的事件处理程序。您根本不应该使用on*事件属性。

Answer 2

您可以尝试类似的事情

$('button').on('click', function() {
  var str = '<div class="agent">';
  str += '<div class="col-md-3 disabledagent">';
  str += '<div class="disabled-agent-label"><span><b>Disabled</b></span></div>';
  str += '<div class="agent-name col-md-6">';
  str += '<span class="agent-ip">Jhony test</span>';
  str += '</div></div></div>';
  $('.append').append(str);
});

.disabledagent {
  position: relative;
  margin-bottom: 15px;
}

.disabledagent::after {
  content: "";
  opacity: 0.5;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: red;
}

.disabled-agent-label {
  z-index: 10;
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append"></div>
<button type="submit">Append...</button>

Answer 3

我通过添加如下代码来解决我的问题，并感谢@RoryMcCrossan和@ Chill007的帮助

 .disabledagent {
   position: relative; 
   margin-bottom:15px;
 }
 .disabledagent::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(213, 218, 222, 0.75);
 }     

 .disabled-agent-label {

     z-index: 10;
     position: absolute;
     height: 100%;
     width: 100%;
     text-align: center;
     padding-top: 30%;
 }

css：在通过jQuery创建元素时不起作用

3 个答案: