As you can see in the screenshot, I\'ve got an unordered list. Now the div
of this list has a background image. What I want to do is to change background\'s ima
Since there is still no CSS parent selector you can use 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.
<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.
you can use js to deal with it.
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) ;
You can do this by CSS only. It's a trick and in the most of the cases you will need to use JS, but its working and working good! (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>