html元素重疊 下面的元素仍然響應事件的解決

2021-06-02 12:44:38 字數 643 閱讀 6292

其實就是pointer-events和elementfrompoint

對於兩個div,div a覆蓋了div b,但是要讓div b能夠接收到滑鼠的事件,有兩種方法:

1.在firefox chrome等支援css3瀏覽器中,有個css屬性叫pointer-events,設定div a的 pointer-events: none,

於是a上經過的所有滑鼠事件都會過濾掉而不觸發,相當於事件從a上直接滲透到了b上,於是b能響應事件。這時給a繫結了事件,也不會觸發。

2.在ie中沒有css3的屬性,但是要拿到這個事件,可以通過給body繫結滑鼠事件,然後在事件響應裡通過

document.elementfrompoint(e.clientx,e.clienty)來獲取當前滑鼠所在位置的元素,雖然事件不是由你想要的那個元素觸發的,但是通過這種方式能把元素和事件聯絡起來,但是效率上沒有直接獲得那麼高而已。

var obj = window;

//var obj = document.body;

var event = function(e);

var evt = "click";

if(obj.addeventlistener)else if(obj.attachevent)

fixed元素遮擋下面元素的問題

網頁實際開發中會遇到fixed置頂元素,有時需要由後端決定是否顯示。所以在布局上注意fixed元素遮擋問題。具體解決辦法如下 html fixed wrap fixed fixeddiv div under underdiv css fixed wrap fixed under 說明 在fixed元...

CSS元素的重疊方式

負margin 給元素設定負margin使其移動後 原來的位置是不會保留的 負margin可以讓元素的占用空間變小 後面的元素可以覆蓋當前的元素 這裡有兩個相同大小的div 寬高都是100px 如圖一 當我們給上面類名為div的div設定了 margin bottom之後 見圖二 我們發現下面的元素...

怎麼給HTML裡面的元素加樣式

分為外聯樣式,在css資料夾下新建login.css檔案 這是id選擇器,頁面上所有是這個的元素,都執行這裡面的樣式 div1 所有是p標籤的元素執行這裡面的樣式 p 他是class選擇器,通常命名的時候以 開頭,裡面定義了一些樣式,誰要是想用,直接用class 引用就可以了 center hu新建...