JavaScript « Как узнать, что за элемент под другим элементом
Привет, Гуру!
Понимаю, что, скорее всего, это невозможно, но все же есть такая задачка.
Ряд дивов (#a1,#a2,...), над ними находится див с большим z-index (#b1):
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="a1" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 1</div>
<div id="a2" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 2</div>
<div id="a3" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 3</div>
<div id="a4" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 4</div>
<div id="b1" style="height:40px; position:relative; top:-40px; background:#F60; opacity:0.8; clear:both;"></div>
> Посмотреть пример живьем <
Задача:понять над каким из нижних дивов находится курсор.
Понимаю, что, скорее всего, это невозможно, но все же есть такая задачка.
Ряд дивов (#a1,#a2,...), над ними находится див с большим z-index (#b1):
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="a1" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 1</div>
<div id="a2" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 2</div>
<div id="a3" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 3</div>
<div id="a4" style="width:100px; height:40px; float:left; margin-right:5px; background:#0C0">div 4</div>
<div id="b1" style="height:40px; position:relative; top:-40px; background:#F60; opacity:0.8; clear:both;"></div>
> Посмотреть пример живьем <
Задача:понять над каким из нижних дивов находится курсор.
1 ответов
Вариант, пожалуй, один - узнавать через offsetParent координаты и размещение каждого элемента на странице, и при mousemove проверять координаты мыши на вхождение в интвервалы координат элементов, с учетом скролла.
1) Нужно узнать координаты (x, y) и размеры ваших нижних блоков.
2) Когда мышкой водите, то у нее тоже есть координаты. Думаю, теперь не составит труда вычесть, над каким блоком находится курсор.