<!-- 6장 연습문제 4 -->
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<style>
img{margin-left: auto; margin-right: auto; display: block;}
.hyper{
text-decoration-line:none;
}
.text{
border : 1px solid black;
text-align: center;
color:black;
}
.text:hover{
background-color:yellow;
color: red;
text-decoration-line:none;
}
</style>
</head>
<body>
<img src = "images/book.png" >
<a href = "http://naver.com" class = "hyper">
<p class = "text">[책 자세히 보기]</p> </a>
</body>
</html>
I'm facing an issue where the background color is extending beyond the text when hovered over. I tried using a border to contain it, but it didn't work as expected. Can anyone provide a solution to this problem?