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にしてしまう方法もある。