Javascript div css中的jquery事件参数

我的目标是放大一个div内的图片，缩小一个div的背景图片

我有了第一个javascript，它改变了.pixbox DIV中的IMG元素

我还有第二个javascript，它改变了.pixbox DIV的背景图像

问题：如何通过.on（）事件参数选择元素的控件 我试过使用.css（'background-image'），但似乎不起作用

CSS

.pixbox {
    background:url()

javascript

$('.pixbox').css('background-image').on({
            mouseover: function(){

                var $scale = 0.7;
                if ($(this).data('w')) {
                    var $w = $(this).data('w');
                    var $h = $(this).data('h');
                } else {
                    var $w = $(this).width();
                    var $h = $(this).height();
                    $(this).data('w', $w).data('h', $h);
            }
          <rest of code>

$（'.pixbox'）.css（'background-image'）。打开({
mouseover:function（）{
var$标度=0.7；
if（$（this）.data（'w'））{
var$w=$（this.data（'w'）；
var$h=$（this.data（'h'）；
}否则{
var$w=$（this.width（）；
var$h=$（this.height（）；
$（this.data（'w'，$w）.data（'h'，$h）；
}

html

<div class="pixbox">
    <img class="zoom" src="">
</div>

---

我自己设法解决了！但代码还是有点问题

---

在小提琴中，您使用的是一个不存在的

mouseout

事件。您应该使用

mouseenter

和

mouseleave

事件。

div {
    width: 300px;
    height: 300px;
    background: url(http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-icons-business/080837-glossy-black-icon-business-magnifying-glass-ps.png) no-repeat center center;
    transition: background-size 2s ease-in-out;
    -moz-transition: background-size 2s ease-in-out;
    -ms-transition: background-size 2s ease-in-out;
    -o-transition: background-size 2s ease-in-out;
    -webkit-transition: background-size 2s ease-in-out;
}
div:hover {background-size: 60% 60%;}