-1

タグdivのように全体をリンクにしたい。aもちろんjsでも可能かもしれませんが、cssだけでできるのか興味があります。

私はこれを持っています：

#my_div {
  width: 200px;
  background-color: #090;
}

#my_div:hover {
  background-color: #0f0;
}

ページ構造は次のとおりです。

<div id="my_div"><a href="http://google.com">link</a></div>
4

7 に答える 7

5

displayプロパティをblock次のように設定することで、インライン要素をブロックレベルの要素として機能させることができます。

/* Make all a tags that are decedents of the
   element with an id of `my_div` be displayed as block level elements */
#my_div a {
    display: block;
    width: 200px;
    height: 100px;
    text-align: center;
    background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }

実際にはラッピングは必要ありません。クラスまたはIDを指定すればdiv、特定のタグを直接ターゲットにすることができます。a

于 2012-09-07T19:52:17.610 に答える
3

これを試して：

#my_div a {
    display: block;
    width: 100%;
}
于 2012-09-07T19:52:15.667 に答える
3

CSS で要素を作成することはできませんが、代わりにタグでラップすることができdivますa。次のようになります。

<a href="http://google.com"><div id="my_div"></div></a>

これにより、div全体があなたのものへのリンクになりますhref。

CSS3 にはcontent現在このプロパティがありますが、生の HTML をそこに入れることはできないと思います。誰かがあなたの.cssファイルにアクセスできた場合、それはセキュリティ面でかなり悪いでしょう...

とにかく、上記の解決策は、あなたが求めたことを達成する最も簡単な方法だと思います。

于 2012-09-07T19:54:08.153 に答える
1

疑似クラスを div ではなく a タグに設定する必要があります。

#my_div a:hover { 
    background-color: #0f0; 
}

それはそれの仕事をするはずです:-)

于 2012-09-07T19:54:52.110 に答える
0

スタックオーバーフローに投稿されたこの質問を確認する必要があると思います。 div をリンクにする これは、div をリンクにする方法に関する Google での最初の結果でした。

于 2012-09-07T19:53:53.290 に答える
0

お願いします：

  • HTML はコンテンツに構造を追加します (例: 本の章、強調する内容など)。
  • CSS は、それらのアイテムの色/フォント/配置を追加します
  • Javascript の追加により、インタラクティブになります。
于 2012-09-07T19:54:57.930 に答える