Наведение через CSS в Chrome + GWT

Question

У меня странная проблема с Chrome.Я использую следующий код и стиль для отображения <div class="hoverslave"> при зависании:

<div class="hoverhome">
    <div class="...">...</div>
    <div class="hoverslave">...</div>
</div>

.

.hoverhome:hover .hoverslave {
    display: inline;
}

.hoverhome .hoverslave {
    display: none;
}

.editelement {
    /*display: inline-block;*/
    margin-left: 10px;
}

Это работает только в этой конфигурации.Если я закомментирую или даже удалю блок .editelement (класс "editelement" даже не существует в DOM ...) .hoverslave будет отображаться постоянно:

/*.editelement {
    *display: inline-block;*
    margin-left: 10px;
}*/

То жеесли я попытаюсь добавить margin-left: 10px; в другом месте (div, .hoverslave, ...).Как я могу получить отступ в 10 пикселей в левой части .hoverslave?

Все также работает, как и ожидалось, когда я запускаю приложение локально, но не когда оно развернуто в Google App Engine.W3C CSS Validator не показывает никаких ошибок.

Answer 1

Хорошо, я нашел ошибку: я неправильно использовал GWT SafeHtmlBuilder. Открывающий и закрывающий теги не были в одном объекте SafeHtml.

Неправильно:

sb.appendHtmlConstant("<div class=\"hoverhome\">");
sb.appendHtmlConstant("...");
sb.appendHtmlConstant("</div>");

Правильный путь объяснен на веб-сайте GWT . Мое решение теперь использует шаблоны:

sb.append(TEMPLATE.hoverhome(title, actions));

Я также допустил ошибку при загрузке файла CSS с помощью тега на HTML-странице хоста. Этот метод сейчас устарел. Используя встроенные элементы, все работает. Подробнее на странице GWT.

Answer 2

Просто добавьте поле к объявлению CSS, которое показывает .hoverslave.

Пример здесь.