Question

正如您在屏幕截图中看到的，我有一个无序列表。现在此列表的n1.initNode有一个背景图片。我想要做的是每当我将鼠标悬停在列表项上时更改背景图像。请注意，每个项目都应将背景更改为其他图像。我该怎么做呢？我只找到了如何更改为单个而非多个图像的答案。

这是截图。

我已经在列表的第一项上徘徊。

div的CSS：

div

Answer 1

您只能通过CSS执行此操作。这是一个技巧，在大多数情况下你需要使用JS，但它的工作和工作都很好！（在整页中查看）

＆＃13;

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

＆＃13;

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

＆＃13;

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

你可以使用j来处理它。

＆＃13;

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

＆＃13;

将鼠标悬停在列表项上时更改背景图像

4 个答案: