Changing background image when hovering on a list item

Question

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 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:

.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;
}

Added random image from the Internet http://codepen.io/K4R0L3N45/pen/PPwvzL/ — Karolis.L, Sep 06 '15 at 07:15

Mosh Feu · Accepted Answer · 2015-09-06T07:21:20.333

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="https://i.stack.imgur.com/tq1uR.jpg" />
      <img src="https://i.stack.imgur.com/ZAy9V.jpg" />
      <img src="https://i.stack.imgur.com/xfvXS.jpg" />
    </div>
  </div>

score 4 · Answer 2 · answered Sep 06 '15 at 07:12

4

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>

answered Sep 06 '15 at 07:12

Cheslab

1,896
2
17
27

This code is almost exactly what I need. The only flaw is that when you hover the mouse out of the list item, the background image does not return to the default one. – Karolis.L Sep 06 '15 at 11:59
@Karolis.L you can use `onmouseout` as well. Check this out http://jsfiddle.net/qc3d2spg/ – Cheslab Sep 06 '15 at 14:02
By the way, how do I add some sort of a fade in/out effect? Cuz if you rush through the menu it flickers like crazy. – Karolis.L Sep 06 '15 at 15:28
@Karolis.L I thought that it may be possible by using jQuery `animate()` function, but there is no `background-image` in the [list of properties that can be animated](http://www.w3schools.com/jquery/eff_animate.asp), only `backgroundPositionX` and `backgroundPositionY`. But I think you can set an image under your div (by wrapping it in another div with default background image, for example) and change `opacity` of `.container` instead of it's `background-image`. Also look at [this](http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery) – Cheslab Sep 06 '15 at 15:54
Could you help me implementing this? I'm not quite sure what I'm doing. By the way, I've found some sort of a trick using CSS. However, I don't know how to insert this into 'onmouseover' function. Check the following CSS: http://codepen.io/K4R0L3N45/pen/EVjZZd/ – Karolis.L Sep 07 '15 at 19:32

score 1 · Answer 3 · answered Sep 06 '15 at 07:11

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.

Sorry for the tag, just used to suggested ones. – Karolis.L Sep 06 '15 at 11:45 — Karolis.L, Sep 06 '15 at 11:45

score 1 · Answer 4 · answered Sep 06 '15 at 07:58

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) ;

Changing background image when hovering on a list item

4 Answers4

Linked

Related