Keep div: зависать при изменении вложенного поля выбора

Question

Это проблема только для IE.Вы можете увидеть проблему здесь (неработающая ссылка) с IE (дождитесь загрузки страницы и наведите значок NY Times на левой нижней панели инструментов. Затем попробуйте выбрать новую опцию). Расположение: .toolTip становится видимым, когда его родительский div находится над ним.Внутри .toolTip находится поле выбора.Когда пользователь открывает поле выбора, чтобы сделать выбор, родительский элемент становится скрытым.

Почему IE думает, что когда я наводю курсор мыши на поле выбора, я больше не нахожусь над родительским элементом div?

Вот некоторый соответствующий код (урезанный для ясности):

#toolBar .toolTip {
    position: absolute;
    display:none;
    background: #fff;
    min-width: 300px;
    }   

#toolBar .socialIcon:hover .toolTip {
    display:block;
    }

и

<div id="toolBar">
<div class="socialIcon">
     <span class="toolTip">
         <h1>NY Times Bestsellers Lists</h1>
           <div id="nyTimesBestsellers">
             <?php include('/ny-times-bestseller-feed.php') ?>
           </div>

       <p>
          <select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList"> 
            <option value="hardcover-fiction">Hardcover Fiction</option> 
            <option value="hardcover-nonfiction">Hardcover Nonfiction</option> 
            <option value="hardcover-advice">Hardcover Advice</option> 
          </select>
       </p>
     </span>
</div>
</div>

Что я попробовал

Перемещение элемента select в другие элементы.Изменение свойств position и display выбранных здесь параметров select, option, p, span, div.

Answer 1

Решил это, добавив <a href="#" class="closeParentBox">close</a> к .toolTip div и

<!--[if IE]>
<script type="text/javascript">
  jQuery(function($){
    $('.toolTip select').focus(function(){
        $(this).parents('.toolTip').addClass('keepOpen');
    });
    $('.toolTip select').blur(function(){
        $(this).parents('.toolTip').removeClass('keepOpen');
    });

    $("a.closeParentBox").click(function(){
        $(this).parents('.toolTip').fadeOut();
        return false;
    });
  });
</script> 
<![endif]-->

Не очень ... Я бы хотел услышать лучшие ответы.

Answer 2

Я могу подтвердить. Ошибка IE, от IE7 до IE9 9.0.7930.16406

У меня была похожая проблема. Единственный способ решить эту проблему - использовать Javascript для добавления / удаления классов или изменения свойств css на лету!

Answer 3

Мне удалось выделить вашу проблему в простую демонстрацию: http://jsfiddle.net/TnzS4/

В демоверсии у вас есть серый прямоугольник, который содержит элемент SELECT. Всякий раз, когда вы наводите рамку, она становится красной.

Теперь современные браузеры (Chrome, FF, Safari, Opera) ведут себя так: если вы откроете элемент SELECT и наведете курсор на его элементы (элементы OPTION), поле DIV сохранит свой красный фон - это означает, что :hover состояние все еще активно.

Однако, если вы наведите курсор мыши на элементы OPTION в IE, поле станет серым - это означает, что состояние :hover не активно.

Вывод: в IE при наведении курсора на раскрывающийся список элемента SELECT «убиваются» все :hover состояния, которые были активными.

Теперь я не знаю, является ли это ошибкой, но вам нужно будет найти решение этой специфической для IE проблемы. К сожалению, я не знаю решения.

Answer 4

Я обновил JSFiddle Sime Vidas, чтобы включить мое решение: http://jsfiddle.net/TnzS4/221/

Вот в двух словах:

$wrap = $('.wrap');
$dropdown = $('.dropdown');

$dropdown.focus(function() {
  $wrap.addClass('hover');
  $dropdown.one('change', function() {
    $wrap.removeClass('hover');
    $dropdown.blur();
  });
});
$dropdown.blur(function() {
  $wrap.removeClass('hover');
});

Я добавляю класс «зависания», когда пользователь фокусируется на раскрывающемся списке, и удаляю класс «зависания», когда пользователь выбирает параметр или теряет фокус на раскрывающемся списке.

Класс .hover имитирует CSS псевдокласса: hover.

Событие 'focus' срабатывает только один раз, когда вы щелкаете по раскрывающемуся меню, пока оно снова не станет размытым. Решение состоит в том, чтобы размыть () выпадающий список после выбора параметра, что позволяет исправлению работать несколько раз.

В моем конкретном случае мне пришлось поместить $ wrap.removeClass ('hover') в setTimeout, как показано ниже. Это зависит от вашего сценария, поэтому я оставил его вне JSFiddle:

setTimeout(function() {
  $wrap.removeClass('hover');
}, 1000);