У меня есть 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 всплывающая подсказка отображается правильно
Боюсь, у меня нет объяснений, но у меня есть исправление.
Добавьте 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
класс затем сбрасывает их до значений по умолчанию, заставляя кнопку показывать, когда класс применяется.