DIV элемент курсор ведет себя inconsistenly

У меня есть DIV элемента на странице JSP, поведение которого определяется в следующем классе CSS:DIV элемент курсор ведет себя inconsistenly

.toolbarRight .shortcut { 
background-position: left center; 
background-repeat: no-repeat; 
width:16px; 
height:16px; 
margin:0 8px 0 0; 
display:inline; 
cursor:pointer; 
position:relative; 
top:6px; 
float:left; 
border:none; 
} 

span.toolbarRight .export { 
background-image: url('/images/excel.gif'); 
}

Поэтому в основном при наведении на него мышью он должен изменить в указатель , Проблема состоит в том, что он изменяется только на указатель на нижнюю часть 1/4 элемента, а сверху 3/4 - нет. Посмотрите на приведенные ниже рисунки для иллюстрации проблемы.

Pic 1: курсор мыши находится на нижней 1/4 значок Excel (изменения в указатель):

enter image description here

Pic 2: курсор мыши находится над верхней 3/4 значок Excel (не изменить в указатель):

enter image description here

Другое дело, что странно, что это происходит только в моей текущей конфигурации экрана, которая включает в себя две DHTMLX сетки, один в верхней части экрана, флористику r внизу (см. рисунок ниже; значок Excel, где проблема возникает обведен желтым цветом):

enter image description here

Если у меня есть три сетки (два горизонтальных и один вертикальный) проблема не возникает:

enter image description here

Кто-нибудь знает, что причина для этого?

источник

2013-02-18 lukegf

Обычно, когда у меня возникает эта проблема, это потому, что у вас есть дополнение другого элемента, перекрывающее панель инструментов (или что-то еще). Так как нижняя 1/4 видна, то вероятность чего-то выше, она немного перекрывается.

источник

2013-02-18 22:30:11 Joe

Да, это именно то, что было проблемой. Благодаря! – lukegf

Это ваш

позиция: относительная; верх: 6px;

комбо - элемент сидит на 6 пикселей ниже, чем вы думаете. Изображение может быть выше, но контейнера нет. Переместите указатель на изображение, а не на контейнер для изображения.

источник

2013-02-18 22:31:21 Scott

, если это было правдой, тогда курсор мыши изменился бы на указатель, если я нахожусь прямо под изображением, но это не так. – lukegf

Другие ответы могут быть правильными, но вы также можете иметь проблему с плавающей запятой.

Вы можете заставить родительские контейнеры обернуть своих детей с плавающей точкой, применив overflow: hidden;. Попробуйте это. Если это не удается, используйте clearfix.

Кроме того, я не знаю, будет ли ширина и высота вашего класса .toolbarRight .shortcut, потому что у вас установлено значение display: inline. Попробуйте встроенный блок или просто старый блок, когда вам нужно применить ширину и высоту к вещам.

источник

2013-02-18 22:32:22 stephenmurdoch

Я попробовал переполнение: скрыто, а также отображение: встроенный блок и дисплей: блок. Никто из них не работал. Я еще не знаком с clearfix. Кроме того, я заметил, что изображения слева от того, что вызывает проблему, работают нормально, хотя они используют один и тот же класс CSS .toolbarright .shortcut. – lukegf

Хмм, в этих ситуациях я обычно проверяю элемент, о котором идет речь, с помощью Chrome (щелкните правой кнопкой мыши, выберите «Проверить элемент») или Firebug. Вкладка «Элементы» позволяет вам навешивать элементы в разметке и отображать контуры ширины и высоты, которые каждый элемент имеет за кулисами. Возможно, что-то покрывает ваши divs, как @Joe предлагает. Используйте Chrome Inspector, чтобы увидеть, вмешивается ли какой-либо из смежных div. Просто наведите указатель мыши на вкладку элементов, и вы увидите схему. – stephenmurdoch

Да, это то, что происходило. Еще один DIV справа от него был шире, чем выглядел, и он перекрывал этот вопрос. Я скорректировал ширину другого DIV и исправил проблему. Благодарю. – lukegf

DIV элемент курсор ведет себя inconsistenly

ответ

Смежные вопросы