Question

我试图创建一个contenteditable元素，将其悬停在指针上时会显示一个编辑图标。当元素包含内容时，我管理了该部分。元素显示inline，使其适应文本内容。问题是当它变空时，在这种情况下，我需要将元素的display更改为block，因为我需要设置最小宽度，而inline无法做到这一点。我也尝试过设置一些填充，而不是将display更改为block，但是效果是一样的。

您可以在this fiddle中看到它。具有内容的元素可以很好地工作，但是悬停的空白元素会开始闪烁。我希望这些元素能够按其原样进行编辑，并根据内容调整文本，将单词折断为宽度，但是如何消除闪烁的问题？

编辑：到目前为止，我管理的最佳行为是在框为空时不包括悬停图标，但这并不理想。

$(document).on('mouseenter', '[contenteditable=true]:not(:focus):not(:empty)', function(e) {
  icon($(e.currentTarget), '#edit-icon');
});

$(document).on('focus', '[contenteditable=true]', function(e) {
  icon($(e.currentTarget), null);
});

$(document).on('mouseleave', '[contenteditable=true]', function(e) {
  icon($(e.currentTarget), null);
});

Answer 1

问题是，当您添加图标时，会使该元素不为空，从而造成了问题。对其进行修复以将图标添加到上部容器的想法：

https://jsfiddle.net/0ecn5f9o/3/

function icon(el, name) {

  var container = $('.hover-icon', el.parent());

  // Only one icon at a time
  container.remove();

  // Clear
  if (name == null) {
    return null;
  }

  var wrap = $(name, '.icon-set');
  var icon = $('svg, img', wrap).clone();

  // Insert
  container = $('<span class="hover-icon"></span>');
  container.append(icon);

  el.parent().append(container);

  return container;
}

$(document).on('mouseenter', '[contenteditable=true]', function(e) {
    icon($(e.currentTarget), '#edit-icon');
});

$(document).on('mouseleave', '[contenteditable=true]', function(e) {
  icon($(e.currentTarget), null);
});

Answer 2

当您的jquery添加图标时，它会出现在内容可编辑的h2中，这会导致：empty选择器失效，因为您刚刚将图标添加到了它。这将导致元素移动，从而触发mouseout事件。这就是导致闪烁的原因。将图标添加到包含h2的div中。

$(document).on('mouseenter', '[contenteditable=true]', function(e) {
    icon($(this).parent(), '#edit-icon');
});

$(document).on('mouseleave', '[contenteditable=true]', function(e) {
  icon($(this).parent(), null);
});

https://jsfiddle.net/0ecn5f9o/1/

还考虑使用内联块。还可以利用min-width属性。此示例弄乱了您似乎想要的图标的对齐方式，但确实停止了闪烁。可以将这些图标重新定位为您仅喜欢的CSS。

在内容悬停的{h}上显示图标

2 个答案: