私は完全な初心者であり、別の質問を投稿して、内部に LIST を含む DIV を取得し、その上にカーソルを合わせると DIV 全体をクリック可能/リンク可能にすると、色が変わります。
私はあらゆる種類のスタントでそれを台無しにしましたが、これを行うための最良の方法が何であるかを知ることを楽しみにしています.
どうもありがとう。
これを試して:
HTML
<div class="clickable">
<ul>
<li>hello</li>
<li>world</li>
</ul>
CSS:
.clickable {
background-color: #ddd;
}
.clickable:hover {
background-color: #8F8
}
テスト:
これをリンクのように振る舞いたい場合は、リンクタグを使用してdisplay: block
css を設定することをお勧めします
アンカー タグの幅と高さを設定し、それを宣言しdisplay:block
ます。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
#link {
width:300px;
height:300px;
}
#link a {
width:300px;
height:300px;
display:block;
background-color:orange;
}
#link a:hover {
background-color:red;
}
</style>
</head>
<body>
<div id="link">
<a href="#">I am a Link</a>
</div>
</body>
</html>
CSSでかなり簡単にできます。
リンクの「クリック可能な領域」全体を占めるようにするには、そのリンクの CSS にdiv
追加します。display:block
マウス ホバー時の色の変更は、次のように CSS で行うこともできます。
a:hover {
background-color:green;
}
私の理解では、リスト全体を単一のリンクにしようとしているということです。少し奇妙に思えますが、次のようにorタグの外側に<a>
タグを配置するだけです。<ul>
<ol>
<a href="yourlink.html">
<ul>
<li>List Item 1</li>
<li>List Itme 2</li>
</ul>
</a>
http://www.w3schools.comで、優れた初心者用 Web 開発チュートリアルを確認してください。