Question

您能否请看一下这个演示，让我知道如何使用jquery在.house点击事件后删除Pseudo内容

$('.remove').on('click', function() {
  $('.house::after').css('display', 'none');
});

.house {
  position: absolute;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent red transparent transparent;
}

.house::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background: url("http://i.imgur.com/nceI30v.png");
  background-repeat: no-repeat;
  background-position: 75% 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="house"></div>
<button class="remove">Remove Pseudo</button>

Answer 1

试试这段代码......

from bokeh.io import show
from bokeh.models import Legend
from bokeh.plotting import figure

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
years = ["2015", "2016", "2017"]
colors = ["#c9d9d3", "#718dbf", "#e84d60"]

data = {'fruits' : fruits,
        '2015'   : [2, 1, 4, 3, 2, 4],
        '2016'   : [5, 3, 4, 2, 4, 6],
        '2017'   : [3, 2, 4, 4, 5, 3]}

p = figure(x_range=fruits, plot_height=250, title="Fruit Counts by Year",
           toolbar_location=None, tools="hover", tooltips="$name @fruits: @$name")

rs = p.vbar_stack(years, x='fruits', width=0.9, color=colors, source=data)

p.y_range.start = 0
p.x_range.range_padding = 0.1
p.xgrid.grid_line_color = None
p.axis.minor_tick_line_color = None
p.outline_line_color = None

legend = Legend(items=[(fruit, [r]) for (fruit, r) in zip(fruits, rs)], location=(0, 30))
p.add_layout(legend, 'right')

show(p)

$('.remove').on('click', function() {
  $('.house').addClass('removing');
});

.house {
  position: absolute;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent red transparent transparent;
}

.house::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background: url("http://i.imgur.com/nceI30v.png");
  background-repeat: no-repeat;
  background-position: 75% 40%;
}
.removing:after{
display:none
}

Answer 2

您应该通过点击.e.g：house_without和css：

添加新课程

.house_without:after {
  content: none; /* may be add !important */
}

使用jQuery后无法删除伪内容后的元素

2 个答案: