悬停在列表项目上时更改背景图像
正如你在截图中看到的,我有一个无序列表。 现在这个列表的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>
由于仍然没有CSS父选择器,所以可以使用jQuery
#container {
width: 800px;
height: 600px;
background: url(http://filepic.ru/file/1441522670.jpg);
}
#container li {
display: block;
margin: 5px;
float: right;
clear: both;
background-color: #fff;
width: 150px;
}
#container li:hover {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<ul>
<li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522623.jpg)');">1</li>
<li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522645.jpg)');">2</li>
<li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522653.jpg)');">3</li>
<li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522662.png)');">4</li>
<li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522670.jpg)');">5</li>
</ul>
</div>
使用下面的代码片段中显示的方法,你将拥有onmouseover属性A:将分配给每个列表项的图像源分别存储到一个变量中,然后B:调用一个函数来更改你的css背景图像div(通过ID)通过更改背景图像的来源。
<script type="text/javascript">
var pictureI;
function changeBckGrnd(){
document.getElementById("nameOfDiv").style.backgroundImage = "url('picSrc')";
}
</script>
<ul>
<li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 1</li>
<li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 2</li>
<li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 3</li>
<li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 4</li>
</ul>
注意:您的文章是在CSS中,但是您标记为JavaScript,所以我认为您已经开放了JavaScript。
链接地址: http://www.djcxy.com/p/27407.html上一篇: Changing background image when hovering on a list item
下一篇: How to make the 'clickable hand' appear in an HTML document?