如何对可拖动Div应用悬停效应

我有一个可拖动区域，该区域具有多个可以拖动的DIV。我希望对可拖动div应用悬停效果。我只想打电话给鼠标的缩放效果。这是我的代码

    $('<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%;
}

在您的元素上应用.zoom类。现在他们没有任何课程。只需在jQuery选择器中修改为$(<div class="zoom" ...或调用.addClass('zoom')，CSS将完成其余的。

避免使用内联CSS

将其用作Div。

上的类

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

建议：

您以不足的方式使用了jQuery选择器。我建议从类中选择，而不是创建可选的对象。喜欢这里：

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

基本上，将 class ='lagable'添加到要使拖动的任何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);
}

希望它有帮助。

相关内容

最新更新

热门标签：