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

正如您在屏幕截图中看到的那样，我有一个无序列表。现在这个列表的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; 
}

来源

2015-09-06 Karolis.L

我认为你必须使用JavaScript。 –

现在这是一个详尽的解释。 QQ –

你可以发布一个codepen或小提琴吗？ – NooBskie

您可以通过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>

来源

2015-09-06 07:14:33

Upvote for a css-only solution！ – curtis1000

使用在下面的代码段中所示的方法，你将有的onmouseover属性两者：存储分配给每个列表项到可变的图像的源B：调用一个函数，通过改变背景图片的源代码来改变div的css背景图片（通过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。

来源

2015-09-06 07:11:26

对不起，标签，只是用于建议的。 –

由于仍然没有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>

来源

2015-09-06 07:12:19 Cheslab

这段代码几乎就是我所需要的。唯一的缺点是，当您将鼠标悬停在列表项目外时，背景图像不会返回到默认值。 –

@ Karolis.L你也可以使用'onmouseout'。看看这个http://jsfiddle.net/qc3d2spg/ – Cheslab

上帝保佑你。 :) –

你可以用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) 
 
{ 
 
\t container.hover(function() { 
 
\t \t \t //mousein 
 
\t \t \t for(var i=0;i<imgArr.length;i++) 
 
      \t \t { 
 
      \t \t \t container.eq(i).css("background-image","url("+imgArr[i]+")") ; 
 
      \t \t } 
 
\t \t }, function() { 
 
\t \t \t //mouseout 
 
\t \t \t for(var i=0;i<imgArr.length;i++) 
 
      \t \t { 
 
      \t \t \t container.eq(i).css("background-image","") ; 
 
      \t \t } 
 
\t \t }); 
 
} 
 
setBackgroudHover(imgArr,container) ;

来源

2015-09-06 07:58:01

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

回答

相关问题