HTML/CSS/JS沒有「存在」的可見元素

是否有可能具有可見的html元素，但在頁面上缺少存在的元素？HTML/CSS/JS沒有「存在」的可見元素

讓我給你舉個例子。可以說我有一個圖片庫和一個燈箱。通常，Lightbox會將背景灰化，以便您可以專注於圖像。我想要的是灰色的覆蓋，但我不希望它是互動的。所以如果你點擊它，你會點擊它後面的元素。因此，可以說我有一個段落，並在該段落中，我有一個鏈接並覆蓋該段落是一個覆蓋率爲50％的不透明度，如果我將鼠標懸停在該鏈接上，鏈接將作出反應，但覆蓋層不在那裏。

我希望我已經解釋了這不夠好

AFAIK有沒有簡單的方法來做到這一點，唯一的辦法是讓鼠標座標並以某種方式傳達他們：/是療法反正我想什麼是可能的？

感謝

來源

2011-06-18 Ozzy

一個選項只是將您的元素的顏色更改爲較暗的元素，懸停到更亮。 – Ibu

我打算做的覆蓋是更復雜，然後一個純色，我只是用作爲一個例子=（ – Ozzy

不幸的是你不能給一個div一個禁用的屬性，以及至少它不會做預期的效果 – Ibu

這可以在某些瀏覽器中使用pointer-events : none完成，但不幸的是沒有任何版本的IE。

來源

2011-06-18 06:24:02 Domenic

我不知道'pointer-events'，謝謝。儘管它違反了表達和行爲分離的原則，但它可能非常有用。 –

這是不可能有一個疊加在你希望它是透明感。你可以嘗試做的是相反的;將「覆蓋」層放在頁面的其餘部分後面，然後將整個頁面的不透明度更改爲50％。在視覺上這不會有任何區別，但它會消除JS點擊的bubbly效果。

來源

2011-06-18 05:45:57

如果這作品，你甚至不需要缺席的元素 – harpo

你不需要任何元素的「底層」，只是將樣式應用到body和不透明度到身體內的包裝div。 – Endophage

@harpo ：哦，在他對自己的帖子的評論中，Ozzy表示他希望把一些不同於簡單純色的東西放在一個「疊加層」上，通過簡單地淡化整個頁面，而不用在它後面放置東西，它只會灰色 –

您可以使用CSS從文檔流中提取元素，但是如果發生這種情況，元素只要可見即可接收點擊事件。

您可以在疊加層上附加一個單擊事件，然後使用鼠標座標document.elementFromPoint或手動循環所有要交互的元素並檢查頁面上的座標。這種方法的問題在於NoScript或其他一些產品might detect this as ClickJacking，它基本上即使您將其用於良性目的。

來源

2011-06-18 05:48:35

詳細說明，您的點擊事件必須先隱藏疊加層，然後使用'document.elementFromPoint'來獲取它後面的任何內容，然後再次顯示疊加層。否則'document.elementFromPoint'將最終返回覆蓋層本身:)。 – Domenic

@Domenic謝謝你補充一點，我的意思是說我自己，但顯然我忘了。 –

我不明白爲什麼這是不可能的。不透明度約爲跨瀏覽器的5個CSS屬性。我不確定覆蓋圖（與圖層或z-index相同的東西）究竟是什麼意思，或者您是否在談論使用css的所有p標記的可能性，然後它是p：hover in css ，但對於特定的p標記，然後使用一個#ID有：hover僞類是這樣的：

#myptag:hover { 
    background-color: #f3c9d5; 
    background-image:url(/images/mybgimg.jpg); 
    color:blue; 
    cursor:pointer; 
}

不透明度，從windows.index使用數字0到100：

//this function modifies the opacity of an element at a 
//specific id like el1 or el2 using imageNumber as the index. 
//you also specify an opacityInteger, which is an non-negative 
//integer number in the range 0..100 
//works on chrome, safari, ie, and firefox, all the major browsers. 
function processimage(imageNumber, opacityInteger) { 
    var opacityFloat=opacityInteger/100.0; 
    //set image style, if we can - I hear it's readonly... 
    //filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0 
    document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")"; 
    document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString(); 
    document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString(); 
}

好吧，我只是意識到這只是勉強有用。雖然它可能會讓你朝你的目標邁進，但你可能仍然需要設置一個css z-index：1;在一個layerto得到一個實際的覆蓋。我剛剛給你的是一個UNDERLAY，或者簡單地將給定的p標籤的顏色或背景圖像設置爲另一個東西。我不知道這是否適合你。我發現覆蓋圖極難管理，因爲頁面佈局引擎將所有圖層看作是相同的圖層標籤 - 流式智能，您必須使用絕對定位來強制它們保持在您想要的位置加上它使用圖層混淆你的主頁。

來源

2011-06-18 07:56:20

HTML/CSS/JS沒有「存在」的可見元素

回答

相關問題