如何在jQuery的懸停（）事件的熱點中包含元素的邊距？

jQuery(".my_container").hover(function(){ 
    //do code 
    }, function(){ 
    //do code 
    }); 

.my_container { width: 100px; height: 100px; margin: 50px; }

上面的代碼不會對鼠標懸停進行反應（margin不是元素的一部分？） - 我該如何改變它？如何在jQuery的懸停（）事件的熱點中包含元素的邊距？

來源

2012-07-02 Atadj

「懸停」的確切含義是什麼？ – Blaster

邊緣不是元素的一部分，它是自然流中其他元素不應占用的元素周圍的空間，即元素之間的空間。你可以使用填充來代替，但這隻會使元素變大，這可能就是你無論如何要做的，然後只是將內容調整爲元素的大小。在元素之間觸發事件處理程序顯然是一個非常糟糕的主意，這就是爲什麼它沒有完成。 – adeneo

@adeneo我不能去填充解決方案，因爲我已經使用填充樣式，它擴大了背景顏色區域等 – Atadj

也許使用第二包裝元素具有填充所述外元件上，並且現有背景和填充樣式內部元件上：

<div class="my_container"> 
    <div class="my_container_inner"> 
     <!-- etc. --> 
    </div> 
</div>

jQuery(".my_container").hover(function(){ 
    //do code 
}, function(){ 
    //do code 
});

.my_container { padding: 50px; } 
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

來源

2012-07-02 18:07:28

我做了類似的東西:)謝謝！ – Atadj

你可以使用一個50像素的透明邊框，而不是 - 保證金是不是真的應該是mouseable ...

來源

2012-07-02 17:46:49

好的解決方案，但：（1）透明邊框採用元素的背景顏色，（2）透明邊框「搶斷」邊框半徑這是不是我想要的。 – Atadj

如何在'.my_container'周圍元素的邊添加50px的邊距？它不會允許懸停在那裏，但您的佈局可以保留。順便說一句，你爲什麼需要懸停在元素的主體之外？ –

更改頁邊距來填充，這將是hoverable。

來源

2012-07-02 17:50:17 PriestVallon

我已經有填充用於造型的目的。 – Atadj

包含一個pseudo element，例如

.my_container:before { 
    content:''; 
    position:absolute; 
    top:-50px; 
    bottom:-50px; 
    left:-50px; 
    right:-50px; 
}

這會爲現有元素的可點擊區域增加一個額外的50像素。

如果你只是想添加這個在觸摸屏設備，你可以這樣做：

.touchevents .my_container:before { 
    ... 
}

這需要像Modernizer插入相應的基於特徵的CSS類。

來源

2017-09-20 14:29:33 Dunc

如何在jQuery的懸停（）事件的熱點中包含元素的邊距？

回答

相關問題