。在重疊的div上隱藏

我正在製作一個Chrome擴展，其中我將邊框添加到用戶鼠標的任何dom元素結束處。我的主要問題是，當我翻轉一個div元素與孩子父母的div和孩子div都收到一個邊框時，我只想直接在鼠標下的div來接收邊框。這裏是我的代碼縮短版本：。在重疊的div上隱藏

$("*").hover(
function(e) { 
    var targ = $(e.currentTarget); 
    targ.css("border", "3px solid red"); 
},function(e){ 
    var targ = $(e.currentTarget); 
    targ.css("border", "none"); 
} 
);

是有辦法的目標只能是DIV直接鼠標不是父div的下？

* *想通了，但它sooper hakey：

var killedObj; 
var outlines=[]; 
var hovering=[]; 

$("*").not("body").not("head").each(
    function(i){ 
     outlines[i] = $(this).css("outline"); 
     hovering[i] = false; 
     //console.log("index = " + i + " class name = " + $(this).attr('class')); 
     $(this).hover(
      function(){ 
       hovering[i]=true; 
       if($(this).parents()!=null)killOutline($(this).parents(), outlines[$(this).parents().index()]); 
       if($(this).children()!=null)killOutline($(this).children(), outlines[$(this).children().index()]); 
       $(this).css("outline", "2px solid red"); 
      },function(){ 
       hovering[i]=false; 
       $(this).css("outline", ""+outlines[i]); 
       if($(this).parent()!=null){ 
        if(hovering[i-1] == true){ 
         resetOutline($(this).parent()); 
        } 
       } 
      } 
     ); 
    } 
); 

function killOutline(obj,outline){ 
    obj.css("outline", ""+outline); 
} 
function resetOutline(obj){ 
    obj.css("outline", "2px solid red"); 
}

如果任何人有一個更清潔的方式隨時

來源

2013-06-20 user2503648

'e.stopPropagation（）'？ –

它不工作，但我可能沒有正確實施它？ – user2503648

我現在看到您的更新代碼。這可能適用於某些網站，但如果您試圖允許用戶瀏覽到的任何網站的輪廓線，那麼您的腳本應該會死掉的輪廓會出現問題。見下面我的其他建議。 –

你在頁面上連接了太多的監聽器。要處理這個，你只需要一個。嘗試在這裏粘貼在控制檯下輸入如下代碼來測試在此網頁上：

;(function() { 
    var lastTarget; 

    jQuery(document).on({ 
     mouseover: function(e) { 
      e.stopPropagation(); 
      lastTarget = jQuery(e.target); 
      setState(lastTarget, true); 
     }, 
     mouseout: function(e) { 
      if(lastTarget) { 
       setState(lastTarget, false); 
      } 
      lastTarget = null; 
     } 
    }); 

    var setState = function(block, state) { 
     if(state) { 
      block.css("outline", "3px solid red"); 
     } else { 
      block.css("outline", ""); 
     } 
    }; 

}());

正如裘德·奧斯本說 - 這是更好地建立邊界，它的位置在目標元素而不是修改內嵌樣式（你可以更新此行爲在setState功能）。

來源

2013-06-20 07:57:31 Inferpse

美麗！我想到了上面，但這是好得多 - thnx – user2503648

它不會是有可能的目標只有一個項目，因爲結果取決於如何爲您所在的網站設置CSS。如果一個div的孩子被設置爲繼承父母的邊框設置，那麼當你設置他們父母的邊框時，他們會得到一個邊框。

您也可能無法循環瀏覽父母的子女並刪除他們的邊界，因爲其可能兒童實際上需要邊框。它可能會有點棘手。

我能想到的最佳解決方案是獲取您正在懸停的項目的位置，高度和寬度，並創建一個新的臨時div，其中包含邊界並且位於頂點。這應該產生預期的效果。

來源

2013-06-20 07:36:02

。在重疊的div上隱藏

回答

相關問題