Fatal编程技术网
  • jquery/
  • 使用jquery在中添加css属性

使用jquery在中添加css属性

jquery html css

使用jquery在中添加css属性,jquery,html,css,Jquery,Html,Css,我有一个图像在我的html和我有5个不同的链接，我想改变图像背景位置只使用一个类，所以我在函数中设置参数，但它不工作 <head> <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript"> $(function Bg(left,top) { $('.me').each(function (){

我有一个图像在我的html和我有5个不同的链接，我想改变图像背景位置只使用一个类，所以我在函数中设置参数，但它不工作

<head>

<script type="text/javascript" src="jquery-1.7.min.js"></script>

<script type="text/javascript">

$(function Bg(left,top) {

    $('.me').each(function (){
        $(this).hover(function(){
            $('.container').css({backgroundPosition: left+ 'px', top + "px"})

            })

        })

    })




</script>
<style>

.container { width:100px; height:100px; float:left; background:url(../bike.jpg) left top no-repeat;}
</style>

</head>

<body>
<a href="#" class="me" onmouseover="Bg(50,60)">click me1</a>
<a href="#" onmouseover="Bg(80,70)" class="me">click me2</a>
<a href="#" onmouseover="Bg(120,60)" class="me">click me3</a>
<a href="#" onmouseover="Bg(150,60)" class="me">click me4</a>

<div class="container"></div>

</body>


$（功能背景（左，上）{
$（'.me'）。每个（函数（）{
$（this）.hover（函数（）{
$（'.container'）.css（{backgroundPosition:left+'px'，top+'px}）
})
})
})
.container{width:100px；height:100px；float:left；background:url（../bike.jpg）left top无重复；}
您（意外的
，
）的语法错误。试一试

$('.container').css('background-position', left + 'px ' + top + 'px');
或

相反

编辑：这不是
.hover（）
的工作方式。使用
.hover
或
鼠标悬停
，最好将它们混合使用。您可以使用以下代码来解决问题，但是，我建议您查看jQuery文档。尝试分离JavaScript逻辑，尽可能不要使用属性处理程序

（意外的
，
）的语法错误。试一试

$('.container').css('background-position', left + 'px ' + top + 'px');
或

相反

编辑：这不是
.hover（）
的工作方式。使用
.hover
或
鼠标悬停
，最好将它们混合使用。您可以使用以下代码来解决问题，但是，我建议您查看jQuery文档。尝试分离JavaScript逻辑，尽可能不要使用属性处理程序

下面是正确的语法

$('.container').css({backgroundPosition: 'left, top'});
下面是正确的语法

$('.container').css({backgroundPosition: 'left, top'});
那密码不行。您将值内联存储在每个
的
href
属性中，并且从不调用函数本身

您应该移动
data
属性中的背景位置，如：
data bg=“x，y”
，然后使用此调整后的代码：

   $(function() {
    $('.me').each(function (){
        $(this).on('hover', function(){
             var bgPos = $(this).attr('coords');            
             bgPos = bgPos.split(',');   
             $('.container').css(
                  'background-position', bgPos[0] + 'px ' + bgPos[1] + 'px');
            });
        });
  });
那密码不行。您将值内联存储在每个
的
href
属性中，并且从不调用函数本身

您应该移动
data
属性中的背景位置，如：
data bg=“x，y”
，然后使用此调整后的代码：

   $(function() {
    $('.me').each(function (){
        $(this).on('hover', function(){
             var bgPos = $(this).attr('coords');            
             bgPos = bgPos.split(',');   
             $('.container').css(
                  'background-position', bgPos[0] + 'px ' + bgPos[1] + 'px');
            });
        });
  });
@amit:T.J.添加了缺少的
+
，请重试。请将您遇到的所有JavaScript错误添加到您的问题中。@amit:t.J.对不起，我根本没有查看您的JavaScript，我只注意到CSS错误。@amit:t.J.添加了缺少的
+
，再试一次。请将您遇到的所有JavaScript错误添加到您的问题中。@amit:对不起，我根本没有看您的JavaScript，我只注意到CSS错误。我想按参数添加背景位置，就像我说的一样。在这里，左侧和顶部参数是您在mouseover事件上传递的参数。你只需要复制并粘贴这一行，在你的代码中取代你的代码，它将为你工作。我想通过它的参数添加背景位置，就像我说的一样。在这里，左侧和顶部参数是您在mouseover事件上传递的参数。你只需要复制并粘贴这一行，在你的代码中替换你的代码就可以了。非常接近我的要求，但是这是$（'.container'）.css（{backgroundPosition:bgPos[0]+'px'，bgPos[1]+'px'}）；line给我syntext error还有一件事我正在用coords=“50,60”attr代替数据bg，因为我没有找到它如果我只给一个参数，那么它就像$（'.container'）.css一样工作（{backgroundPosition:bgPos[0]+'px'}）；是的，它正在工作，谢谢，但我不明白额外的空间是如何让它发生的bgPos[0]+'px'，如果我从右边的qout中删除一个空间，它就不工作了。这很简单
background position
采用2个参数，在本例中为像素，其形式为：
background position:xy
（注意
x
和
y
之间的空格），其中
x
是水平偏移，y是垂直偏移。jQuery ofc在添加自定义值时遵循这一点。非常接近我的要求，但这是$（'.container'）.css（{backgroundPosition:bgPos[0]+'px'，bgPos[1]+'px'}）；line给我syntext error还有一件事我正在用coords=“50,60”attr代替数据bg，因为我没有找到它如果我只给一个参数，那么它就像$（'.container'）.css一样工作（{backgroundPosition:bgPos[0]+'px'}）；是的，它正在工作，谢谢，但我不明白额外的空间是如何让它发生的bgPos[0]+'px'，如果我从右边的qout中删除一个空间，它就不工作了。这很简单
background position
采用2个参数，在本例中为像素，其形式为：
background position:xy
（注意
x
和
y
之间的空格），其中
x
是水平偏移，y是垂直偏移。jqueryofc在添加自定义值时遵循这一点。