正如您在屏幕截图中看到的,我有一个无序列表.现在这个列表的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;
}
解决方法
您只能通过CSS执行此操作.这是一个技巧,在大多数情况下你需要使用JS,但它的工作和工作都很好！ (在整页中查看)
.wrapper {
width:900px;
height:600px;
position:relative;
}
.item {
position:relative;
z-index:1;
}
.bg {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.bg img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:all .3s ease;
}
.bg img:nth-child(1),.item:nth-child(1):hover ~ .bg img:nth-child(1),.item:nth-child(2):hover ~ .bg img:nth-child(2),.item:nth-child(3):hover ~ .bg img:nth-child(3) {
opacity:1;
}
<div class="wrapper">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="bg">
<img src="http://i.stack.imgur.com/tq1uR.jpg" />
<img src="http://i.stack.imgur.com/ZAy9V.jpg" />
<img src="http://i.stack.imgur.com/xfvXS.jpg" />
</div>
</div>
