[英]Changing background image when hovering on a list item
As you can see in the screenshot, I've got an unordered list. 正如您在屏幕截图中看到的,我有一个无序列表。 Now the
div
of this list has a background image. 现在这个列表的
div
有一个背景图像。 What I want to do is to change background's image whenever I hover the mouse on a list item. 我想要做的是每当我将鼠标悬停在列表项上时更改背景图像。 Note that every item should change background to a different image.
请注意,每个项目都应将背景更改为其他图像。 How do I do this?
我该怎么做呢? I've only found answers how to change to a single, not multiple images.
我只找到了如何更改为单个而非多个图像的答案。
Here's the screenshot. 这是截图。
I've already hovered on the first item of the list. 我已经在列表的第一项上徘徊了。
div
's CSS: 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;
}
You can do this by CSS only. 您只能通过CSS执行此操作。 It's a trick and in the most of the cases you will need to use JS, but its working and working good!
这是一个技巧,在大多数情况下你需要使用JS,但它的工作和工作都很好! (See it in Full Page)
(在整页中查看)
.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>
Since there is still no CSS parent selector you can use jQuery 由于仍然没有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>
Using the method shown in the following code snippet, you would have the onmouseover attribute both A: Store the source of the image assigned to each list-item to a variable respectively, then B: Call a function that changes the css background image of your div (through an ID) by changing the background image's source. 使用以下代码片段中显示的方法,您将拥有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>
Note: Your post was in CSS, but you tagged javascript, so I assumed you were open to JavaScript. 注意:您的帖子是CSS,但是您标记了javascript,因此我认为您对JavaScript持开放态度。
you can use js to deal with it. 你可以用js来处理它。
var imgsArr = [url1,url2,......] ;//array of backgroud img's url var container = $(".menu li"); //suppose you have linked in jquery function setBackgroudHover(imgArr,container) { container.hover(function() { //mousein for(var i=0;i<imgArr.length;i++) { container.eq(i).css("background-image","url("+imgArr[i]+")") ; } }, function() { //mouseout for(var i=0;i<imgArr.length;i++) { container.eq(i).css("background-image","") ; } }); } setBackgroudHover(imgArr,container) ;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.