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类。现在他们没有任何课程。只需在jQuery选择器中修改为$(<div class="zoom" ...或调用.addClass('zoom')，CSS就会完成剩下的工作。

Answer 2

避免使用INLINE CSS

将其用作DIV上的课程。

<div class=".zoom.dragable"> Drag me!</div>

<强>建议：

您以不恰当的方式使用了jQuery选择器。我建议从一个类中选择，而不是创建一个可选择的对象。像这里：

$( ".dragable" ).draggable();

基本上将 class =＆＃39;可拖动的＆＃39; 添加到您想要拖动的任何HTML对象中。 另外：尝试在样式部分或外部文件中使用CSS。

拼凑所有内容

<script> 
  $( ".dragable" ).draggable();
</script>

<style>
      .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%;
}
</style>

<body>
  <div class=".zoom.dragable"> Drag me!</div>
</body>

作为奖励，您还应该尝试这些CSS效果：

放大：

.zoomIn:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

缩小：

.zoomOut:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

希望它有所帮助。

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

2 个答案: