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

Posted

技术标签:

【中文标题】悬停在列表项上时更改背景图像【英文标题】:Changing background image when hovering on a list item 【发布时间】:2015-12-01 22:58:17 【问题描述】:

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

【问题讨论】:

我认为你必须使用 javascript 现在这是一个详尽的解释。 QQ 你能发一个codepen或fiddle吗? 添加随机图片来自互联网codepen.io/K4R0L3N45/pen/PPwvzL 【参考方案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>

【讨论】:

【参考方案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>

【讨论】:

这段代码几乎正是我所需要的。唯一的缺陷是当您将鼠标悬停在列表项之外时,背景图像不会恢复为默认图像。 @Karolis.L 你也可以使用onmouseout。看看这个jsfiddle.net/qc3d2spg 顺便问一下,如何添加某种淡入/淡出效果?因为如果你匆忙浏览菜单,它会像疯了一样闪烁。 @Karolis.L 我认为可以通过使用jQuery animate() 函数来实现,但是list of properties that can be animated 中没有background-image,只有backgroundPositionXbackgroundPositionY。但我认为您可以在 div 下设置一个图像(例如,通过将其包装在另一个具有默认背景图像的 div 中)并更改 .containeropacity 而不是 background-image。另请看this 你能帮我实现这个吗?我不太确定我在做什么。顺便说一句,我发现了某种使用 CSS 的技巧。但是,我不知道如何将其插入“onmouseover”功能。检查以下 CSS:codepen.io/K4R0L3N45/pen/EVjZZd【参考方案3】:

使用下面代码sn-p中显示的方法,你会同时拥有onmouseover属性A:将分配给每个列表项的图像的源分别存储到一个变量中,然后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 持开放态度。

【讨论】:

抱歉这个标签,只是用来推荐的。【参考方案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) ;

【讨论】:

以上是关于悬停在列表项上时更改背景图像的主要内容,如果未能解决你的问题,请参考以下文章

悬停元素时更改背景

使用css将鼠标悬停在按钮上时如何更改站点背景图像?

将鼠标悬停在特定 <li> 上时如何更改 <ul> 背景图像? [复制]

在悬停其他元素时更改身体背景图像/渐变

更改链接悬停时的背景图像

将鼠标悬停在列表上时如何更改锚点颜色