悬停在列表项上时更改背景图像
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
,只有backgroundPositionX
和backgroundPositionY
。但我认为您可以在 div 下设置一个图像(例如,通过将其包装在另一个具有默认背景图像的 div 中)并更改 .container
的 opacity
而不是 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) ;
【讨论】:
以上是关于悬停在列表项上时更改背景图像的主要内容,如果未能解决你的问题,请参考以下文章