スクリーンショットでわかるように、順序付けられていないリストがあります。このリストのdiv
には、背景イメージがあります。私がしたいのは、マウスをリスト項目に置くたびに背景のイメージを変更することです。すべてのアイテムが背景を別のイメージに変更する必要があることに注意してください。これはどうすればいいですか?私は、複数の画像ではなく、単一の画像に変更する方法を見つけました。リスト項目をホバリングしたときの背景画像の変更
ここにスクリーンショットがあります。
私はすでに、リストの最初の項目に推移しました。
div
のCSS:変数に各リスト項目に割り当てられた画像のソースを格納します。次のコードスニペットに示した方法を用いて
.body {
display: block;
float: left;
background-image: url("bgdef.jpg");
background-repeat: no-repeat;
position: static;
width: 100%;
height: auto;
margin: 0;
}
.menu {
width: 250px;
padding: 0;
margin: 100px 0px 33% 75%;
list-style-type: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.menu a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
bottom: auto;
padding-bottom: auto;
text-shadow: none;
}
.menu li {
background-color: white;
margin: 10px;
padding: 3px 0 3px 10%;
border-radius: 10PX 0 0 10px;
font-size: 20px;
}
.menu li:hover {
background-color: green;
margin-right: 18px;
margin-left: 1px;
}
私は、あなたはJavascriptを使用しなければならないと思います。 –
これは完全な説明です。 QQ –
コードペインやフィドルを投稿できますか? – NooBskie