Question

我希望能够将鼠标悬停在一封信上，在这种情况下保罗中的'P'并将其显示为白色，但是当我在网络浏览器中测试网站时，悬停操作在鼠标触摸之前开始实际的文字。

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

distance of hover

我的代码可能有问题......

这是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;
}

如果有人能指出我的错误并找到解决办法，我将非常感激！提前谢谢。

Answer 1

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

EDIT！ - 将h2切换到内联块，而不仅仅是内联，然后将行高更改为您需要的任何值。可能~0.7

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

这使用javascript，但基本上运作完美。

Answer 2

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

使用时突出显示文字：悬停

2 个答案: