如何在可拖動的div上應用懸停效果

我有一個可拖動的區域，其中有多個div可以拖動。我希望對可拖動div應用懸停效果。我只想在鼠標懸停效果上調用類ZOOM。這裏是我的代碼如何在可拖動的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%; 
}

來源

2017-05-31 nikk

您的陳述'我只是想在鼠標懸停效果上調用類ZOOM'和CSS代碼'.zoom：hover'完全相互矛盾。請你詳細說明一下。 – vijayP

適用於你的元素.zoom類。現在他們沒有任何課程。只需在jQuery選擇器中修改爲$(<div class="zoom" ...或調用.addClass('zoom')，CSS將完成剩下的工作。

來源

2017-05-31 06:47:08 vassiliskrikonis

它沒有反應縮放類通過簡單地調用類爲div – nikk

你能提供一個可運行Snipet？ – vassiliskrikonis

如果我只是將縮放類應用到普通的div，然後它做它的工作，但是當我包括類到這個div即div內jQuery的可拖動div，然後縮放類沒有響應 – nikk

避免使用內聯CSS

使用它作爲對DIV類。

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

建議：

你在不適當的方式使用jQuery選擇。我建議從班級中選擇，而不是創建一個可選擇的對象。喜歡這裏：

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

的類= 'dragable'基本上添加到你想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); 
}

希望它有幫助。

來源

2017-05-31 06:59:01 Adi

PLZ不要改變我的div。我只能這樣做。因爲那個div是手動從數據庫中獲取數據的。我有大頁面依賴於此。我只向你展示了一小部分。PLZ調用類僅放大我的可拖動div – nikk

如何在可拖動的div上應用懸停效果

回答

相關問題