a要素の大きさが変わらない

a要素の大きさが思うようにできません。
html及びCSSは以下のようになっています（今回うまくいってない箇所）

html
1        <div class="header-right">
2			<a href="#"><img class="write" src="飛行機.png" alt"投稿を意味する画像"></a>	
3			<a href="#" class="login">ログイン</a>
4        </div>

css
1.header-right{
2	float:right;
3	height:65px;
4}
5.header-right a{
6	line-height:65px;
7	padding-right:20px;
8	padding-left:20px;
9}
10.header-right :hover{
11	background-color:rgba(35,35,35,1);
12	transition: all 0.5s;
13}
14.login{
15	background-color:rgba(165,165,165,0.9);
16	text-decoration:none;
17	display:inline-block;
18	color:white;
19	float:right;
20}
21.write{
22	height:65px;
23	width:60px;
24	display:inline-block;
25	margin-right:40px;
26}

1枚目の画像のログインのところにマウスカーソルを合わせると2枚目のように形に添った感じで色を変えたいのですが、紙飛行機のところにマウスカーソルを重ねてもいびつな形に色が変わってしまいます。画像の形は四角なのでログインと同じようにその画像に沿ったように綺麗な四角で色が変わるようにしたいです。

1枚目

2枚目

3枚目

（なお画像ごとに大きさなどが違うのは私は画像を編集するのが下手なだけです気にしないでください。）

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .header-right {
13            float: right;
14            height: 65px;
15        }
16
17        .header-right a {
18            display: inline-block;
19            line-height: 65px;
20            padding-right: 20px;
21            padding-left: 20px;
22            height: 65px;
23        }
24
25        .write:hover, .login:hover {
26            background-color: rgba(35, 35, 35, 1);
27            transition: all 0.5s;
28        }
29
30        .login {
31            background-color: rgba(165, 165, 165, 0.9);
32            text-decoration: none;
33            display: inline-block;
34            color: white;
35            float: right;
36        }
37
38        .write {
39            height: 65px;
40            width: 60px;
41            display: inline-block;
42            margin-right: 40px;
43        }
44    </style>
45</head>
46<body>
47<div class="header-right">
48    <a href="#">
49        <img class="write" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image" alt="投稿を意味する画像">
50    </a>
51    <a href="#" class="login">ログイン</a>
52</div>
53</body>
54</html>