通过 Jquery 仅更改背景图像的 y 位置
Posted
技术标签:
【中文标题】通过 Jquery 仅更改背景图像的 y 位置【英文标题】:Changing only y pos of background image via Jquery 【发布时间】:2011-06-21 11:24:49 【问题描述】:我想通过悬停功能更改按钮的背景图像 y 位置。有没有一种简单的方法来保持 xpos 或者我应该先获得位置,然后将其拆分并再次与 $.css() 一起使用。
如果有人悬停其中任何一个,我应该更改所有 3 个跨度的背景位置。所以 bt_first:hover 似乎不可用。
这是我的用法。我写了#should stay same# 来表示我不想改变 xpos 的值:
$('.bt_first,.bt_sec,.bt_third').hover(function()
$('.bt_first,.bt_sec,.bt_third').css('background-position':'#should stay same# -150px')
,function()
$('.bt_first,.bt_sec,.bt_third').css('background-position':'#should stay same# -110px');
);
这是我的html。:
<div><a id="add_comment_btn"><span class="bt_first comments_t"><span> </span></span><span class="bt_sec"> </span><span class="bt_third">Comments</span></a></div>
还有css:
.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span
background: url('img/toolbar_bckrnd.png') no-repeat;
.bt_first
background-position: left -110px;
display: inline-block;
height: 24px;
width: 15px;
.bt_sec
background-position: -149px -110px;
display: inline-block;
height: 24px;
width: 2px;
.bt_third
background-position: right -110px;
display: inline-block;
height: 24px;
padding: 0 10px;
【问题讨论】:
类似:***.com/questions/2117594/… @thirtydot 我认为不一样。我只想更改 3 个不同班级的 ypos。 xpos 应该保持预定义。你的帖子谈到了别的事情。我错了吗?还是谢谢。 Kemal:我说的是相似,不是相同。该问题具有检索background-position
的代码,拆分两个值,更改其中一个值,然后将其设置回来。这就是你想要做的。
@thirtydot 哦,对不起,我误会了。我在寻找方法时发现了那个帖子。就是想问问有没有简单的方法。谢谢。
【参考方案1】:
这应该有效:
$('#add_comment_btn').hover(function(e)
var s = e.type == 'mouseenter' ? '-134px' : '-110px';
$(this).children().css('background-position', function(i,v)
return v.replace(/-?\d+px$/, s);
);
);
这适用于#add_comment_btn
锚。如果您有多个锚点,只需使用类选择器将它们全部选中。
顺便说一句,上面的代码与您在答案中发布的代码基本相同。我刚刚摆脱了冗余。
顺便说一句,如果你不想给锚添加类,你可以像这样选择它们:
$('.bt_first, .bt_sec, .bt_third').parent().hover( .... the above code
【讨论】:
【参考方案2】:可能是这样的:
var bg = $('#element').css('backgroundPosition').split(' ');
bg[1] = '-200px';
$('#element').css('backgroundPosition', bg.join(' '));
由于背景位置始终按horizontal vertical
的顺序存储,因此第二个数组值始终是垂直值。
虽然这可能只适用于一个元素。对于多个元素,您可能必须使用循环。
【讨论】:
谢谢。它有效,但如果我只改变一个背景,那就太好了。我需要改变一切。我也有不止一个按钮。等等等等它变得复杂。【参考方案3】:我认为没有简单的解决方案,并在最后找到出路。如果有人需要这个下面的脚本没有问题。
$('.bt_first,.bt_sec,.bt_third').hover(
function()
var id = $(this).closest('a').attr('id');
var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' ');
var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' ');
var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' ');
bg1[1] = '-134px';
bg2[1] = '-134px';
bg3[1] = '-134px';
$('#'+id+' > .bt_first').css('background-position', bg1.join(' '));
$('#'+id+' > .bt_sec').css('background-position', bg2.join(' '));
$('#'+id+' > .bt_third').css('background-position', bg3.join(' '));
,
function()
var id = $(this).closest('a').attr('id');
var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' ');
var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' ');
var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' ');
bg1[1] = '-110px';
bg2[1] = '-110px';
bg3[1] = '-110px';
$('#'+id+' > .bt_first').css('background-position', bg1.join(' '));
$('#'+id+' > .bt_sec').css('background-position', bg2.join(' '));
$('#'+id+' > .bt_third').css('background-position', bg3.join(' '));
);
您应该有一个带有“id”的“a”标签作为所有元素的父元素,并且这些元素必须是第一个子元素。否则修改脚本。
<a id="add_comment_btn"><span class="bt_first comments_t"><span> </span></span><span class="bt_sec"> </span><span class="bt_third">Comments</span></a>
【讨论】:
以上是关于通过 Jquery 仅更改背景图像的 y 位置的主要内容,如果未能解决你的问题,请参考以下文章