Changing background image when hovering on a list item

前端 未结 4 1956
耶瑟儿~
耶瑟儿~ 2020-12-19 04:37

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

相关标签:
4条回答
  • 2020-12-19 04:50

    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>

    0 讨论(0)
  • 2020-12-19 04:53

    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.

    0 讨论(0)
  • 2020-12-19 04:56

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

    0 讨论(0)
  • 2020-12-19 05:03

    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>

    0 讨论(0)
提交回复
热议问题