懸停影響只有1項

嗨，大家好我想知道是否有徘徊與被並排放置和行動會觸發在離開元件的面積相同的類名的幾個要素的方式多個元素。例如：懸停影響只有1項

<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div>

下面的「unhover」javascript應該只在他們離開「hoverme」類的整個區域時被調用。

$('.hoverme').live('mouseover mouseout', function(event) { 
      if (event.type == 'mouseover') { 

       if(!$("#stage1 td").hasClass("hover")) 
       { 
        $("#stage1 td").addClass("hover",200) 
       } 
      } 
      else { 

       //$("#stage1 td").removeClass("hover",200) 

      } 
     });

有沒有一種方法來執行此操作？

編輯：忘了提及div的形狀不只是純正的方形。它由幾個方塊組成，但最終形狀很奇怪。所以我不能用另一個父div來包裝我的div。

我使用jQuery用戶界面，因此我能夠addclass並與第二個參數

來源

2012-07-04 lilsizzo

你能告訴我們在哪裏＃stage1的TD？ –

爲什麼你將第二個參數傳遞給.addClass（）？它只需要一個參數，一個字符串或一個函數。 – Ian

@JeffRobertDagala err我會說＃stage1 td是我擔心的最不重要的事情。它是使td背景變成彩色的。 ianpgall：我使用jqueryui因此我能夠使用第二個參數。編輯帖子提到，現在 – lilsizzo

它似乎是以前的答案的組合。

使用mouseenter和mouseleave而不是mouseover和mouseout。
其次，你可以使用包裝div，這就是我的工作原理。如果你徘徊在一個子div上，那麼你也會徘徊在其父母身上，而不管父母在哪兒。父div上的mouseleave事件不會觸發，直到您不再徘徊在任何孩子身上。

我試着用絕對定位成十字形的五歲以下兒童的div創建零大小包裝的div，我相信它的作品，你說你需要它的方式。經過Firefox和Chrome測試。

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
    if(!$("#stage1 td").hasClass("hover")) 
     $("#stage1 td").addClass("hover", 200) 
    } else { 
    $("#stage1 td").removeClass("hover", 200); 
    }

[編輯，以確認我對jQuery UI的addClass執行測試]

來源

2012-07-04 04:19:39

它工作，因爲你只是在做addClass（「懸停」）如果你碰巧正確地閱讀帖子，我有另一個參數addClass（「懸停」，200）。一旦mouseleaves，它仍然可以看到stage1 td – lilsizzo

的不同狀態我將jQuery UI集成到我的測試中，它仍然正常工作。你能提供你得到的錯誤更清楚的信息嗎？發佈一些示例css？這可能是你的定位方法，這是你的錯誤。 –

我得到它的工作。也許我誤解了或早些時候。謝謝！！ – lilsizzo

試試這個removeclass：live()已被棄用，你可以使用on()方法：

$('.hoverme').on('mouseover', function(event) { 
    $("#stage1 td").addClass("hover") 
}).on('mouseout', function() { 
    $("#stage1 td").removeClass("hover") 
})

http://jsfiddle.net/jUmTt/

來源

2012-07-04 03:19:41 undefined

在這種形式下，'.on（）'不是'.live（）'替換;然而只要這段代碼處於文檔就緒函數中，並且「hoverme」-classed元素不被銷燬和替換，它就可以工作！ –

像我已編輯的帖子...嘗試添加另一個參數添加類和刪除類 – lilsizzo

待辦事項你的意思是每當他們懸停在任何元素上時，他們都會接受hover課程？試試這個：

var elements = $('.hoverme'); 
elements.on('hover', function(event) { 
    event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover'); 
});

或者，你可以調整你的HTML來包裝懸停能力要素，即：

<div class="hoverWrap"> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
</div>

，然後裝上懸停事件偵聽器hoverWrap。在語義上這更有意義;僅僅因爲元素在標記中彼此接近並不意味着它們應該被視爲一個大元素。

來源

2012-07-04 03:22:17 Cecchi

我不知道，但我想你想做到這一點：

var timer; 
$('.hoverme').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
     clearTimeout(timer); 
     if(!$("#stage1 td").hasClass("hover")) { 
      $("#stage1 td").addClass("hover") 
     } 
    } else { 
     timer = setTimeout(function() { 
      $("#stage1 td").removeClass("hover"); 
     }, 300); 
    } 
});

來源

2012-07-04 03:31:54 adeneo

它是行不通的。 adeneo添加另一個參數爲addclass和removeclass ...即時通訊使用jqueryui ...有一個選項。謝謝 – lilsizzo

使用mouseleave代替mouseout。

來源

2012-07-04 03:45:04 Dharmesh

懸停影響只有1項

回答

相關問題