リンク内のdivの背景色を変更するにはどうすればいいですか？

a：visited擬似クラスとJavascriptを使用せずにリンク内のdivの背景色を変更することはできますか？リンク内のdivの背景色を変更するにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      a:hover {background-color:blue;} 
      a:visited {background-color:green;} 

      .smallbox { 
      background-color: #666; 
      height: 50px; 
      width: 50px; 
      } 
      .smallbox:hover {background-color:blue;} 
      .smallbox:visited {background-color:green;} 
     </style> 
    </head> 
    <body> 
     <a href="#"><div class="smallbox"></div></a> 
    </body> 
</html>

出典

2017-08-17 Anthony Flora

'div'要素は 'a'要素の内部にあってはなりません。これは有効なHTML構造ではありません。 – Dekel

はい、これは可能です。訪問された擬似クラスはdivにではなくリンクに属していることを覚えておいてください。

a:hover .smallbox {background-color:blue;} 
 
a:visited .smallbox {background-color:green;} 
 
a:visited .smallbox:hover {background-color:blue;} 
 

 
.smallbox { 
 
    display: block; 
 
    background-color: #666; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<a href="##"><span class="smallbox"></span></a>

コメントでDekelで指摘したように、アンカー要素内のdivが無効なHTMLです。あなたは不正行為をしてスパンをリンクの中に入れ、その表示プロパティを「ブロック」に設定することができますが、それはおそらく本当に良くありません。

あなただけのブロック要素ではなく、インライン要素のように振る舞うのリンクが必要な場合は、この記事で示唆されているようにblockにアンカータグの表示プロパティを切り替えて、完全に内部要素を削除することを検討：<div> within <a>

出典

2017-08-17 21:24:36

リンク内のdivの背景色を変更するにはどうすればいいですか？

答えて

関連する問題