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

【问题标题】：how to apply hover effect on draggable div如何在可拖动的 div 上应用悬停效果
【发布时间】：2017-05-31 06:37:17
【问题描述】：

我有一个可拖动的区域，其中有多个可以拖动的 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%;
}

【问题讨论】：

您的声明i just wish to call class ZOOM on mouse over effect 和CSS 代码.zoom:hover 完全相互矛盾。能否请您详细说明一下。

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

它不会通过简单地将类调用到 div 来对缩放类做出反应
你能提供一个可运行的片段吗？
如果我只是将缩放类应用到一个普通的 div，那么它会做它的工作，但是当我在这个 div 中包含类时，即可拖动 div 的 jquery 中的 div，然后缩放类没有响应
从documentation jQuery UI draggable 提供了以下类：ui-draggable、ui-draggable-dragging。尝试在这些类上应用缩放样式并告诉我这是怎么回事

【解决方案2】：

避免使用内联 CSS

将它用作 DIV 上的一个类。

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

建议：

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

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

基本上将 class='dragable' 添加到您想要使其可拖动的任何 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。我必须这样做。因为那个 div 是手动从数据库中获取数据的。我有大页面依赖于此。我只向你展示了一小部分。请仅在我的可拖动 div 中调用类放大