проблема с css и анимацией в mouseenter

#javascript #jquery #asp.net #html #css

#javascript #jquery #asp.net #HTML #css

Вопрос:

Мой код довольно длинный, но я прокомментировал свой скрипт jQuery. Моя проблема в том, что при наведении курсора мыши на пункты меню, которые он анимирует, он сдвигается на три или около того пикселя вправо. Я играл с этим целую вечность, и я не могу добиться совершенства, потребуется немного времени, чтобы разобраться с этим, но если вы сможете решить мою проблему, я был бы очень признателен. вот ссылка на jsFiddlehttp://jsfiddle.net/g6tAn

1. Не могли бы вы добавить скриншот, показывающий проблему, о которой вы говорите? Кроме того, HTML-это суп из тегов на вкус.

2. какой браузер вы используете? В Chrome все в порядке.

3. сверните фрейм результатов в jsFiddle, тогда вы решите мою проблему

4. Вау! Это вызывает у меня головную боль 🙂

5. проверьте свой CSS — если у вас есть два класса для каждого состояния, убедитесь, что такие вещи, как границы, имеют одинаковую ширину.

Ответ №1:

Это происходит из-за <table> макета. Браузер может сжимать и будет сжимать <td> элементы, когда ему не хватает ширины страницы для отображения таблицы в ее естественной ширине. Вы можете видеть, что наблюдаемый вами небольшой эффект подпрыгивания значительно усиливается в очень узком окне браузера.

Я сделал демо с совершенно другим макетом. Это работает в Chrome12, но я не был в курсе проблем, с которыми сталкиваются другие браузеры list-style-image , поэтому в других браузерах это немного не работает. Вы могли бы просто удалить этот CSS для лучшей кроссбраузерной демонстрации.

Или вы могли бы просто добавить style="width:600px" в свой <table> , который устраняет проблему (если вам, конечно, не нужна таблица динамической ширины …)

1. Спасибо, что сказали мне об этом и переделали то, что я сделал. Мой другой вопрос заключается в том, что когда вы наводите курсор мыши на пункт меню, а затем переходите к другому элементу div, у которого есть другой пункт меню, как вы сохраняете состояние наведения курсора мыши на элемент div перед

2. На самом деле это зависит от структуры. Если это меню amp; rarr; подменю, вы обычно выделяете подменю внутри меню, поэтому событие hover() or mouseover() все равно будет применимо при наведении курсора мыши на пункт меню или его подменю. Если подменю имеет родительский элемент, отличный от меню, то вы могли бы использовать mouseenter() в меню, чтобы отобразить подменю, и mouseleave() в подменю, чтобы закрыть его. Если вам нужна дополнительная информация, мне может понадобиться немного узнать о структуре меню, чтобы помочь.