[IE, JS] Cписок дивы в диве, не кликается и не подсвечивается толком.

bastii

Замучился уже, видимо я ничего не понимаю в этой кухне JS+DOM+... Может кто поможет со следующей проблемой.
Делаю список из сложных элементов, примерно такой структуры.
 

 

<div id="list">

    <div><img ... /><span>...</span> ... </div>

    <div><img ... /><span>...</span> ... </div>

...

</div>

 

Первая. Хочу, чтобы при наведении на внутренний див он подсвечивался (в ФФ и Опере работает :hover). Для IE делал двумя способами, и оба работали с глюками: 1) через mouseover/mouseout c проверкой, что mouseout выходит именно за див элемента списка, 2) через mouseenter/mouseleave. В обоих случаях, повсеместно срабатывают неуместные (в смысле когда визуально мышка над дивом) mouseover. Хотя про 2) не уверен, может быть и mouseenter не досрабатывает — с этим вариантом меньше разбирался. Фактически, получается, что див какой-то дырявый. Проблема решается (кажется если установить background-color в стиле. Но тогда перестают совсем срабатывать клики — это уже вылезает больше вторая проблема.
На див #list установлен обработчик click, так он не срабатывает, если кликать на элементы <img> и <span> внутри дива элемента списка. А если сделать background-color так вообще не срабатывает. Что-то я не могу понять, как тогда работает всплывание события клик в данном случая.
Короче, что я делаю не так, как правильно?

iakobi91

на артлебедеве есть статейка про спрайты, одна из последних. Поситай, наверняка найдешь решение проблемы

kruzer25

1) :hover работает в ФФ, Опере и ИЕ7 или старше.
2) onmouseover и onmouseout - геморрой, используй onmouseenter/onmouseleave, будет работать только в ИЕ и правильно. Для остальных - :hover
3) Да, див действительно дырявый - потому что в нём лежит дырявый текст. Сделай диву background-color:transparent.

bastii

странно, у меня :hover в ИЕ7 не работает
а можно про 3) подробнее, что-то я не понял, что значит "текст дырявый"?

kruzer25

странно, у меня :hover в ИЕ7 не работает

А как именно ты его делаешь?
Попробуй минимальный пример вроде:

<style>

div { background-color:green; }

div:hover { background-color:red; }

</style>

<div>hkjhljhouiyuhouih</div>

а можно про 3) подробнее, что-то я не понял, что значит "текст дырявый"?

То и значит.
Как ты думаешь, в каких случаях у тебя мышь будет находиться над div-ом, если у него нет фона? В тех случаях, когда она находится над его содержимым - то есть, над буквами.

bastii

То и значит.Как ты думаешь, в каких случаях у тебя мышь будет находиться над div-ом, если у него нет фона? В тех случаях, когда она находится над его содержимым - то есть, над буквами.

а почему тогда клик над дивом с фоном не поднимается до внешнего дива?

iakobi91

В тех случаях, когда она находится над его содержимым - то есть, над буквами.

границы тогда на что? Содержимое находится внутри границ, а не тока текст.

kruzer25

Ну вот представь себе большую коробку (без дна а в коробке лежит один маленький винтик.
Когда твоя рука над винтиком - она над содержимым коробки. А когда твоя рука не над винтиком - то не имеет значения, что она в пределах стенок коробки, она над полом, а не над содержимым коробки.

iakobi91

ты как никогда логичен