Наведение CSS не работает со смежным селектором в Chrome, если свойство display не установлено ранее

0

У меня есть 3 Divs " button ", " enableButton " и " подсказка " на моей странице. Я установил отображение: нет для кнопки "по умолчанию".

Свойство отображения " кнопка " изменится на блокировку при нажатии на div " enableButton ". У меня есть определение CSS, которое делает блок отображения div tooltip над мышью над кнопкой. Я использовал смежный селектор (+) с помощью псевдо-селектора hover, чтобы сделать видимым смежную "подсказку".

Мои проблемы - подсказка не отображается на мыши над кнопкой в хроме. Он работает правильно в firefox. Может ли кто-нибудь помочь в этом?. Заранее спасибо.

HTML:

<div id="enableButton">Click to Enable Button</div>
<br/>

<div  style="display:none;" id="button">Button</div>
<div class="tooltip">this is the tooltip</div>

CSS:

#enableButton{cursor:pointer; color:red;}
.tooltip{display:none; padding:5px; border:1px solid #ccc;}
#button{cursor:pointer;}
#button:hover+.tooltip{display:block;}

Javascript:

$("#enableButton").click(function(){
    $("#button").show();    
});

Код в этой скрипке

Нажмите кнопку " Click to Enable", чтобы первая кнопка была видимой и наведите курсор мыши на кнопку, чтобы получить эту проблему.

В firefox всплывающая подсказка отображается правильно

Теги:
google-chrome
hover

1 ответ

1

Боюсь, у меня нет объяснений, но у меня есть исправление.

Демо-скрипт

Добавьте CSS:

#button {
    cursor:pointer;
    height:0;
    width:0;
    overflow:hidden;
}
#button.enabled {
    height:auto;
    width:auto;
    overflow:auto;
}

Затем измените ваш jQuery на:

$("#enableButton").click(function () {
    $("#button").toggleClass('enabled');
});

Окружение:

    height:0;
    width:0;
    overflow:hidden;

Подражает эффекту display:none; который, похоже, вызывает проблему в Chrome. enabled класс затем сбрасывает их до значений по умолчанию, заставляя кнопку показывать, когда класс применяется.

  • 0
    Спасибо, приятель, это сработало ... однако я ищу решение с дисплеем: нет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню