純CSS焦點(diǎn)圖在現(xiàn)代網(wǎng)頁中非常常見，不過在IE瀏覽器中效果經(jīng)常不盡人意。接下來，我們將介紹如何制作同時(shí)兼容IE瀏覽器的純CSS焦點(diǎn)圖。

首先，我們需要使用HTML和CSS來構(gòu)建焦點(diǎn)圖。具體來說，我們需要在HTML中創(chuàng)建圖像容器，并將每張圖片包含在一個(gè)子容器中，如下所示：

接下來，我們需要編寫CSS代碼，以確保焦點(diǎn)圖在IE瀏覽器中正常工作。由于IE瀏覽器不支持一些CSS屬性（例如:hover），因此我們需要使用JavaScript代碼來解決這個(gè)問題。

#focus div {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
#focus div:first-child {
opacity: 1;
}
#focus:hover div {
opacity: 0;
}
#focus:hover div:first-child {
opacity: 1;
}

上面的CSS代碼為每個(gè)圖像容器設(shè)置了絕對(duì)定位，同時(shí)將不透明度設(shè)置為0。然后，在第一個(gè)子容器中，不透明度被設(shè)置為1。這樣就可以確保第一張圖片被默認(rèn)顯示。接下來，我們使用CSS3過渡屬性來創(chuàng)建圖像切換效果。當(dāng)鼠標(biāo)懸停在焦點(diǎn)圖上時(shí)，我們使用:hover偽類來隱藏所有圖像容器，然后使用JavaScript代碼將下一個(gè)容器設(shè)置為可見。這樣，我們就可以在IE瀏覽器中制作一個(gè)自適應(yīng)的純CSS焦點(diǎn)圖了！