[英]How to tackle diagonally stacked, rounded image background element hovers?
我在這里遇到了很大的挑戰,我的語言鴻溝也可能給您解密標題帶來挑戰,但是,...
http://toms.somese.lv/test/或http://jsfiddle.net/Wm32D/1/ (由gvee創建)
紅色陰影是內部具有圓形圖像的元素的邊框。 懸停時,您將能夠看到它們。
<style>
body
{
background-color: black;
font-family: Verdana, sans-serif;
font-size: 12px;
}
#application
{
width: 1000px;
height: 800px;
margin: 0px auto;
position: relative;
}
#ages
{
width: 524px;
height: 513px;
position: absolute;
left: 224px;
top: 166px;
}
#ages > a
{
display: block;
position: absolute;
box-shadow: 0px 0px 1px 0px red;
}
#ages a span
{
position: absolute;
display: block;
background-color: transparent;
background-repeat: no-repeat;
background-position: -9999px -9999px;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#ages > a:hover span, #ages > a.active span
{
background-position: center center;
}
#ages a.year20
{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#ages a.year20 span
{
background-image: url('assets/images/wood-layers/20.png');
}
#ages a.year19
{
width: 498px;
height: 489px;
left: 14px;
top: 10px;
}
#ages a.year19 span
{
background-image: url('assets/images/wood-layers/19.png');
}
#ages a.year18
{
width: 477px;
height: 470px;
left: 24px;
top: 19px;
}
#ages a.year18 span
{
background-image: url('assets/images/wood-layers/18.png');
}
#ages a.year17
{
width: 455px;
height: 449px;
left: 37px;
top: 27px;
}
#ages a.year17 span
{
background-image: url('assets/images/wood-layers/17.png');
}
#ages a.year16
{
width: 434px;
height: 429px;
left: 48px;
top: 37px;
}
#ages a.year16 span
{
background-image: url('assets/images/wood-layers/16.png');
}
#ages a.year15
{
width: 413px;
height: 412px;
left: 59px;
top: 44px;
}
#ages a.year15 span
{
background-image: url('assets/images/wood-layers/15.png');
}
#ages a.year14
{
width: 382px;
height: 382px;
left: 76px;
top: 58px;
}
#ages a.year14 span
{
background-image: url('assets/images/wood-layers/14.png');
}
#ages a.year13
{
width: 346px;
height: 344px;
left: 95px;
top: 77px;
}
#ages a.year13 span
{
background-image: url('assets/images/wood-layers/13.png');
}
#ages a.year12
{
width: 313px;
height: 312px;
left: 112px;
top: 92px;
}
#ages a.year12 span
{
background-image: url('assets/images/wood-layers/12.png');
}
#ages a.year11
{
width: 282px;
height: 282px;
left: 128px;
top: 104px;
}
#ages a.year11 span
{
background-image: url('assets/images/wood-layers/11.png');
}
#ages a.year10
{
width: 247px;
height: 245px;
left: 143px;
top: 121px;
}
#ages a.year10 span
{
background-image: url('assets/images/wood-layers/10.png');
}
#ages a.year9
{
width: 209px;
height: 209px;
left: 162px;
top: 136px;
}
#ages a.year9 span
{
background-image: url('assets/images/wood-layers/9.png');
}
#ages a.year8
{
width: 179px;
height: 177px;
left: 179px;
top: 152px;
}
#ages a.year8 span
{
background-image: url('assets/images/wood-layers/8.png');
}
#ages a.year7
{
width: 150px;
height: 148px;
left: 194px;
top: 163px;
}
#ages a.year7 span
{
background-image: url('assets/images/wood-layers/7.png');
}
#ages a.year6
{
width: 121px;
height: 122px;
left: 208px;
top: 178px;
}
#ages a.year6 span
{
background-image: url('assets/images/wood-layers/6.png');
}
#ages a.year5
{
width: 96px;
height: 94px;
left: 220px;
top: 190px;
}
#ages a.year5 span
{
background-image: url('assets/images/wood-layers/5.png');
}
#ages a.year4
{
width: 73px;
height: 72px;
left: 234px;
top: 200px;
}
#ages a.year4 span
{
background-image: url('assets/images/wood-layers/4.png');
}
#ages a.year3
{
width: 50px;
height: 51px;
left: 245px;
top: 210px;
}
#ages a.year3 span
{
background-image: url('assets/images/wood-layers/3.png');
}
#ages a.year2
{
width: 37px;
height: 37px;
left: 253px;
top: 217px;
}
#ages a.year2 span
{
background-image: url('assets/images/wood-layers/2.png');
}
#ages a.year1
{
width: 19px;
height: 19px;
left: 262px;
top: 226px;
}
#ages a.year1 span
{
background-image: url('assets/images/wood-layers/1.png');
}
</style>
<div id="application">
<section id="ages">
<a class="year20" href="#"><span></span></a>
<a class="year19" href="#"><span></span></a>
<a class="year18" href="#"><span></span></a>
<a class="year17" href="#"><span></span></a>
<a class="year16" href="#"><span></span></a>
<a class="year15" href="#"><span></span></a>
<a class="year14" href="#"><span></span></a>
<a class="year13" href="#"><span></span></a>
<a class="year12" href="#"><span></span></a>
<a class="year11" href="#"><span></span></a>
<a class="year10" href="#"><span></span></a>
<a class="year9" href="#"><span></span></a>
<a class="year8" href="#"><span></span></a>
<a class="year7" href="#"><span></span></a>
<a class="year6" href="#"><span></span></a>
<a class="year5" href="#"><span></span></a>
<a class="year4" href="#"><span></span></a>
<a class="year3" href="#"><span></span></a>
<a class="year2" href="#"><span></span></a>
<a class="year1" href="#"><span></span></a>
</section>
</div>
在圖像中:
問題是,我只需要在鼠標處於其“圓形”范圍而不是邊界框范圍內時激活每一層。 當鼠標移動僅基於X 或 Y時有效,但是當XY(對角線)移動XY時,邊界框會影響正確的高光。
我知道我可以使用多邊形地圖解決此問題,這就是我正在努力解決的問題,但是也許還有其他/更好的方法可以解決此問題?
不過有一個問題,我可以使用的工具是HTML,CSS,JavaScript-沒有服務器端備份。 結果必須向下兼容IE7。
也許您知道有一種工具可以從外部透明度移除中返回我所應用的多邊形邊界框點坐標?
希望您的巫師有一些想法。
您可以使用圖像映射和空白圖像疊加層輕松獲得可點擊的圓圈。 您可以將事件處理程序連接到AREA
標簽。 向后兼容(和死腦)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.