生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

HTML リンクを押せる範囲を拡大する方法

リンクを押せる範囲を拡大する方法

divで範囲を決めて、aはいっぱいに広げる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.link_wrapper{
    border:solid 1px black;
    height:50px;
    position:relative;
    width:200px;
}

.link_wrapper a{
    height:100%;
    position:absolute;
    width:100%;
}

.link_wrapper a:hover {
    background-color:black;
}
</style>
</head>
<body>
  <div class="link_wrapper">
    <a href="#">リンク</a>
  </div>
</body>
</html>

要素aのdisplayをblockにしてしまう方法もある。