html - 段落 :hover not working properly in Chrome

Question

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

• 默认情况下，该段落是一个 block 元素，当我将鼠标放在它上面时悬停会触发，无论 <p> 上的文本数量如何。

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

  .隐藏控件.control{ 显示:无；

  .hidden-controls:hover .control{ 显示:内联 block ；

给定这段 HTML 代码:

<p class='table-row elegant hidden-controls'>
    ✔&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/

Answer 1

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