使用 :hover 时文本突出显示答案

【问题标题】：Text highlight when using :hover使用 :hover 时文本突出显示
【发布时间】：2014-04-11 12:41:25
【问题描述】：

我希望能够将鼠标悬停在一个字母上，在本例中是 Paul 中的“P”并将其显示为白色，但是当我在 Web 浏览器中测试该站点时，悬停动作在鼠标触摸之前开始实际的文本。

图片显示了它在实际字母之前“悬停”的距离（距光标）。

我的代码有问题吗...

这是html代码：

<!DOCTYPE html>

<html>
<head>
<title>Paul</title>

<link rel="stylesheet" href="styles.css" type="text/css"/>

</head>
<body>
<div id="pbox"> 
<h2>P</h2><h1>aul</h1>
</div>
</body>
</html>

这是 CSS 代码：

body
{
background-color:#4b4b4b;
}

h1
{
font-family:cursive;
font-weight:500;
font-size:50px;
color:silver;
display:inline;
}

h2
{
text-decoration:none;
text-shadow:4px 0px 0px rgba(0,0,0,1);
color:#4b4b4b;
font-family:cursive;
font-weight:600;
font-size:75px;
display:inline;
padding:0px 13px 0px 0px;
}

h2:hover
{
color:#eeeeee;
}

#pbox
{
background-color:white;
width:62px;
height:450px;
top:0px;
left:5px;
border-radius:50px 0px;
padding:0px;
}

如果有人能指出我的错误并找到解决方法，我将不胜感激！提前致谢。

【问题讨论】：

如果我不得不猜测它可能与您的字体大小有关。您的字母可能会在基线下方为“y”之类的字母“保留”一些空间。
@user2793390 正是如此。它与行高无关。
我不同意。它确实与行高有关。如果您降低行高，无论您使用什么字体大小，都可以规避“保留空间”的问题。因此，虽然它可能不能归因于线高，但它可以通过线高固定。更改字体大小会有所帮助，但只是任意的。特别是，~0.7 的行高非常接近字母。
@thesublimeobject 你试过添加line-height吗？无论line-height 设置为：jsfiddle.net/gRZFd
抱歉。您必须先将其更改为 inline-block 而不是 inline 才能影响元素。

标签： css hover highlight

【解决方案1】：

我会考虑将你的 line-height 设置为 1 以确保元素不会超出字母本身。任何填充或额外的行高都会导致您遇到的问题。如果您愿意，您甚至可以将填充设置为小于 1，但这取决于您的意愿。

编辑！ -- 将 h2 切换为 inline-block，而不仅仅是 inline，然后将 line-height 更改为您需要的任何内容。可能~0.7

更新：http://codepen.io/thesublimeobject/pen/FjIGD

这使用了javascript，但基本上可以完美运行。

【讨论】：

我尝试将其设置为内联块，但现在“aul”位于“P”下方，悬停距离似乎仍然相同。 :(
让我看看我能不能快速创建一个例子。一分钟。
@ReCeSSiVE 我已经尝试了各种方法，但我无法完全按照您的要求完成任何工作。无论我仍然为悬停获得一点间距，即使认为间距实际上并不存在于元素上。这是我所做的：codepen.io/thesublimeobject/pen/FjIGD。为了简化，我更改了一些东西，但是如果您愿意或完全使用它，您可以添加回您的东西。抱歉，我无法得到您想要的。
没关系，非常感谢您对我的帮助，我可能只需要更改布局并尝试不同的方法，很遗憾它不起作用。
我认为这是因为指针正在切换到光标以便它可以突出显示，因此它似乎更快地进入悬停模式，而真正发生的情况可能是指针的大小正在增加。

【解决方案2】：

你可以尝试减少h2标签的行高样式属性。

【讨论】：