css或jquery的對角線懸停

我想在鼠標出現時製作一個特定的圖像，它會變成另一個圖像; 這很容易與CSS通過鏈接，這個鏈接作爲圖像改變的部分，在做方形懸停時沒有問題。css或jquery的對角線懸停

但我想在對角線圖像上懸停，我該怎麼做？

For Example this image： - 當鼠標懸停在鏈接1上時，圖像變爲白色圖像。

2013-04-06 user2217482

對角線東西afaik不存在於DOM中。你應該使用閃光燈... ... – MarioDS 2013-04-06 20:25:00

閃光燈*從來沒有答案。人們建議，否則就是爲什麼我*仍然*如果你想使用自定義形狀，被迫在我的電腦上不斷更新和不斷崩潰的Flash插件/驅動程序 – 2013-04-06 20:27:06

，那麼SVG是一個很好的選擇（但它不支持舊IE版本） – trajce 2013-04-06 20:27:32

最簡單的方法是將透明區域定位良好的圖像（覆蓋圖），如果您不想使用圖像，我能想到的唯一方法是使用邊界破解創建三角形/對角線。如果您選擇在斯圖Nicholls的網站，後者的樣子 - www.cssplay.com，這就是我很多年前學會了它 - 但要小心，因爲CSS雲的要求

說明它是相當先進：

由於對角線圖像不支持使用對角線圖像從左到右傾斜（/// /）將意味着圖像不會像您想要的那樣一起出現，而是一個傾斜的左下角將與右上角一致的前一個斜面，而不是右下角，在你想要的位置

你可以通過使用z-index來重疊它們，或絕對定位：

.img1 { width: 100px; position: relative; z-index: 1; } 
.img2 { width: 100px; position: relative; left: -100px; z-index: 2; } 
.img3 { width: 100px; position: relative; left: -200px; z-index: 3; } 
.img4 { width: 100px; position: relative; left: -300px; z-index: 4; }

每個圖像進一步沿將具有更大的間隙通過移動，確切的距離將取決於圖像的尺寸和傾斜角度。請記住，您實際上想要移動包裝a而不是圖像本身，否則您可以點擊的區域不會超過圖像

來源

2013-04-06 20:25:46

你會解釋更多的第一種方式，因爲其實我想要使用圖像,, – user2217482 2013-04-06 20:31:10

毫米，這不會使圖像之間的差距 – user2217482 2013-04-06 20:50:50

不，這正是這個例子的解釋。 – 2013-04-06 20:51:51

css或jquery的對角線懸停

回答

相關問題