正如您在屏幕截圖中看到的那樣,我有一個無序列表。現在這個列表的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 –
你可以發佈一個codepen或小提琴嗎? – NooBskie