I am encountering an issue where the hover action for a specific letter begins before the mouse actually touches the text. In this case, I want the letter 'P' in 'Paul' to turn white when hovered over.
The image illustrates the distance from the cursor at which the hover action starts, which is not ideal.
I am wondering if there is a problem with my code. Here is the HTML code snippet:
<!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>
Here is the CSS code:
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;
}
Any assistance in identifying and resolving the issue would be greatly appreciated! Thank you in advance.