小编Jac*_*nci的帖子

不需要的HTML元素闪烁

当我在我正在使用的图像中拖动元素时遇到闪烁问题时,我正在为一个项目工作快速笔.不确定这里发生了什么,当你最初加载笔并第一次将它翻过来时似乎没有出现这个问题,但之后就开始了.

链接到笔.

片段演示:

$(document).bind('mousemove', function(e){
    $('.tagger').css({
       left:  e.pageX - 55,
       top:   e.pageY - 55
    });
});

$('#crowd').hover(function(){
  $('.tagger').show();
});

$('#crowd').mouseleave(function(){
  $('.tagging').attr('class', 'tagger');
  $('.tagger').hide();
});

$('#crowd').click(function(){
  $('.tagging').attr('class', 'tagger');
});

$('.tagger').click(function(){
  $('.tagger').attr('class', 'tagging');  
});

$(document).on('click', '.tagging li', function(){
  alert($(event.target).text());
});
Run Code Online (Sandbox Code Playgroud)
.tagger {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 3;
}

.tagger .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: red;
}

.tagger .name {
  display: none;
  position: relative;
  top: -5px;
  height: 90px;
  width: 90px; …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

8
推荐指数
1
解决办法
201
查看次数

不可点击的分层元素,Z-Index 不起作用

完成一个照片标记练习小部件,我剩下的只是一个问题,即无法选择关闭以前制作的标签的“x”框。我确保关闭它们的代码已经工作,但由于我如何使用跟随光标的分层 div,我可能从未真正点击过它。我已经确定它也有更高的 z-index 值,但这似乎仍然不会影响这个问题。

编辑:刚刚发现另一个小问题,每当标记框变成绿色标记框时,它就会下降大约 5 个像素。是否可以简单地偏移 CSS 高度,或者您是否必须为其提供所有新参数?

笔也在这里。

$(document).bind('mousemove', function(e){
    $('.tagger').css({
       left:  e.pageX - 55,
       top:   e.pageY - 55
    });
});

$('#crowd').click(function(){
  $('.tagging').attr('class', 'tagger');
});

$('#crowd').mouseleave(function(){
  $('.tagging').attr('class', 'tagger');
});

$(document).on('click', '.tagger', function(e){
  $('.tagger').attr('class', 'tagging');
});

$(document).on('click', '.tagging li', function(e){
  $('.tagging .name').text($(event.target).text());
  $('.tagging .xBox').removeClass('hidden');
  $('.tagging').attr('class', 'tagged');
  $( ".container" ).append("<div class='tagger'><div class='xBox hidden'>x</div><div class='frame'></div><div class='name'><ul><li>One</li><li>Two</li><li>Three</li><li>Fork</li><li>Fyve</li></ul></div></div>");
});


$(document).on('click', '.xBox', function(e){
  $(e.target).parent().remove();
});
Run Code Online (Sandbox Code Playgroud)
.tagger {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 3;
}

.tagger .frame {
  position: relative;
  height: 100px;
  width: …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery z-index

3
推荐指数
1
解决办法
903
查看次数

标签 统计

css ×2

html ×2

javascript ×2

jquery ×2

z-index ×1