首頁 > 網際網路

jquery怎麼對div的背景圖片進行系結事件

2019-12-11 16:25:05

通過Jquery對div的背景圖片系結事件,分下面的情況:

1、div的背景是css設定:此時Jquery是無法對背景系結事件的,只能對其容器dom系結事件

2、div中使用img標籤:通過Jquery找到這個img標籤系結事件即可

1

新建如下目錄結構的測試檔案

     ImgClick

         -- Content

             -- Images

                 -- {圖片檔案}

             -- JS

                 -- jquery-1.7.2.min.js

         -- HTMLPage1.html




2

在頁面中新增如下內容

     1)引入Jquery

     2)新增測試div節點


3

【通過css設定的背景圖】此時只能在背景圖所在的dom節點中系結事件

       此時真正觸發的事件是外層dom,所以,如果圖片沒有鋪滿,則點選dom內部的空白也會觸發這個事件




4

【通過css設定的背景圖】係結hover事件

       此時真正觸發的事件是外層dom,所以,如果圖片沒有鋪滿,滑鼠移到dom內部的空白也會觸發這個事件




5

【通過img標籤】系結click事件

      注釋掉通過css設定背景圖的測試程式碼,然後,在div內部新增img標籤,再通過jquery系結click事件,此時,只有點選圖片才會觸發事件,點選空白處是不會觸發事件的



6

【通過img標籤】系結hover事件


7

【通過img標籤】系結hover事件,演示效果如下

      由於img標籤沒有設定高度,div又設定了高度,當圖片高度比較高時,實際顯示圖片高度超過了div高度



IT145.com E-mail:sddin#qq.com