將鼠標懸停在列表項上時更改背景圖像

Question

正如您在屏幕截圖中看到的，我有一個無序列表。 現在這個列表的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;
}

Answer 1

您只能通過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> 

Answer 2

由於仍然沒有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> 

Answer 3

使用以下代碼片段中顯示的方法，您將擁有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持開放態度。

Answer 4

你可以用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) ;