通过Jquery仅更改背景图像的y位置
我想用悬停功能更改按钮的背景图像 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;
}
I want to change button's background image y position with hover function. Is there a simple way of keeping xpos or should I get position first, split it and use again with $.css() again.
I should change all 3 span's background position if somebody hover's any of them. So bt_first:hover not seems usable.
Here is my usage. I wrote #should stay same# to place that I don't want to change value of 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'});
});
Here is my 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>
And 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这应该有效：
这适用于
#add_comment_btn锚点。如果您有多个锚点，只需使用类选择器来选择它们即可。顺便说一句，上面的代码与您在答案中发布的代码基本相同。我刚刚摆脱了冗余。
顺便说一句，如果您不想将类添加到锚点，您可以像这样选择它们：
This should work:
This applies to the
#add_comment_btnanchor. If you have multiple anchors, just use a class selector to select them all.btw the above code is basically the same as the code that you posted in your answer. I just got rid of the redundancy.
btw if you don't want to add classes to the anchors, you can select them like so:
也许是这样的：
由于背景位置始终以水平垂直的顺序存储，因此这应该可以工作，因为第二个数组值始终是垂直值。
尽管这可能仅适用于一种元素。对于多个元素，您可能必须使用循环。
Maybe like this:
As the background-position is always stored in the order
horizontal verticalthis should work as the second array value is always the vertical value.Though this may only work with one element. With multiple elements you may have to use a loop.
我认为没有简单的解决方案，最后找到了出路。如果有人需要这个，下面的脚本可以正常工作。
您应该有一个带有“id”的“a”标签作为所有元素的父元素，并且这些元素必须是第一个子元素。否则修改脚本。
I decided there is no simple solution and find a way out at the end. If somebody needs this below script works with no problem.
You should have an "a" tag with an "id" as parent of all elements and also these elements must be first childs. Otherwise modify script.