javascript - 如何在可拖动div上应用悬停效果

Question

我有一个可拖动区域，其中有多个可以拖动的div。我希望对可拖动的 div 应用悬停效果。我只想在鼠标悬停效果上调用 ZOOM 类。这是我的代码

<小时/>

    $('<div style="background-image:url(images/'+numbersShuffled[i]+'.png);">'+ numbersShuffled[i] + '</div>').data( 'number', numberIndex ).attr( 'id', 'card'+i ).appendTo( '#cardPile' ).draggable( {    
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',


      revert: true
    } );
  }

<小时/>

这里我想在鼠标悬停时缩放背景图像。为了缩放效果我有CSS

<小时/>

    .zoom {
    height: 200px;
    width: 200px;

    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    background-position: center center;
}

.zoom:hover {
    background-size: 150% 150%;
}

Answer 1

应用 .zoom你的元素的类。现在他们没有任何类(class)。只需修改为 $(<div class="zoom" ...在 jQuery 选择器中或调用 .addClass('zoom') CSS 将完成剩下的工作。