1.第一步，我們使用循環創建做一個列表，這個功能在各種demo中經常出現，這裏就不再贅述了。
2.第二步，我們將列的背景圖片設置爲當前數據中的image，然後在列的下面添加一個文本組件展示當前數據中的title。
3.第三步，我們來做鼠標移入後要顯示的部分。首先添加一個數值變量用於數據綁定，其初始值設爲-1；列1是作爲一個背景蒙層，我們設置它的屬性爲撐開，讓它佔滿循環創建列的剩餘區域，其可見屬性與數值變量進行數據綁定，只有當數值變量等於當前序號時它纔是可見的；行1用來顯示具體的描述信息，我們將行1的高度設置爲1px，寬度設置爲100%，同時剪切屬性設置爲否，這樣它的子組件即使高度超出行1的高度也可以顯示完整，這裏我們添加一個文本組件展示當前數據的description，和列1一樣我們也將行1的可見屬性做相同的數據綁定。
4.最後就是事件的設置了，給循環創建列，列1和文本組件都添加上事件，當鼠標移入是將數值變量賦值爲當前序號1，當鼠標移出是再將數值變量重置爲-1，至此整個功能就完成了。
總結
這種案例最好使用數據綁定，如果直接設置當鼠標移入循環創建列時讓行1和列1顯示，鼠標移出行1和列1時再讓行1和列1隱藏的話事件會比較混亂。另外就是這個效果在絕對定位環境下會更容易實現一些，因爲絕對定位環境下子組件可以相互重疊，位置只跟座標有關，而相對定位環境下子組件都是按行或列進行排序，像這個demo比較簡單，只有蒙層和描述信息兩個行列容器，一個設置撐開，另一個設置高度爲1px即可，但是組件再多一些就需要對位置關係進行詳細的計算了。