html - 段落：悬停在 Chrome 中无法正常工作

Question

我创建了一个<p>CSS 规则，但它在 Chrome 中无法正常工作。在 Edge 中，<p>规则的行为是正确的：

• 默认情况下，段落是一个块元素，当我将鼠标放在它上面时会触发悬停，而不管文本的数量是多少<p>

• 在 Chrome 中，我需要将鼠标放在<p>文本上才能触发:hover伪类

  .hidden-controls .control{ 显示：无；}

  .hidden-controls:hover .control{ display: inline-block; }

因此，鉴于此 HTML 代码：

<p class='table-row elegant hidden-controls'>
    ✔&amp;nbsp;{{name}}&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type='button' onclick='RemoveStakeholder(0);' class='pretty small-font-size control vertical-align-middle' title='Remove' value='Remove' />&nbsp; 
    <input type='button' onclick='EditStakeholder(0, this);' class='pretty small-font-size control vertical-align-middle' title='Edit' value='Edit' />&nbsp;
    <input type='button' onclick='MoveStakeholder(0, "M" );' class='pretty small-font-size control vertical-align-middle' title='Move to missing' value='✖' />
</p>

在 Chrome 中，它仅在我将光标放在文本上时触发。有修复或解决方法吗？或者这只是 webkit 的问题？

我用 explorer 和 Edge 对此进行了测试，效果很好。

JSFiddle：https ://jsfiddle.net/afnchaz7/3/

标签： htmlcsswebkit

Answer 1

Chrome 或 Firefox 的行为没有区别。在这两种情况下，段落都会被“display:table”属性挤压。只需删除它们，您就会得到一条完整的线。