Я хочу показать значки ответа и ретвита при наведении курсора на мой твит с помощью css. Я могу изменить цвет фона с помощью кода:
ul.statuses li:hover {
background-color:#F7F7F7;
display: inherit;
}
Но невозможно отобразить значки с использованием эффекта наведения на тот же текст твита. Как показать изменение цвета фона и значков для одного твита?
Я могу показать значки с эффектом наведения, используя код:
ul.statuses .buttons{
display: none;
}
ul.statuses li:hover .buttons {
display: inline-block;
}
И HTML-код для отображения эффекта наведения для фиктивных твитов:
<ul id="status" class="statuses">
<li>Sample tweets. Sample tweets. Sample tweets. Sample tweets. Sample tweets.
<p id="iconlinks" class="buttons">
<a href="#" id="reply"><i class="icon-share-alt" title="Reply"></i></a>
<a href="#" id="retweet"><i class="icon-retweet" title="Retweet"></i></a>
<a href="#" id="favorite"><i class="icon-star" title="Favorite"></i></a>
<a href="#" id="mail"><i class="icon-envelope" title="Mail"></i></a>
<a href="#" id="assign"><i class="icon-user" title="assign"></i></a>
</p>
</li>
<li>Sample tweets. Sample tweets. Sample tweets.
<p id="iconlinks" class="buttons">
<a href="#" id="reply"><i class="icon-share-alt" title="Reply"></i></a>
<a href="#" id="retweet"><i class="icon-retweet" title="Retweet"></i></a>
<a href="#" id="favorite"><i class="icon-star" title="Favorite"></i></a>
<a href="#" id="mail"><i class="icon-envelope" title="Mail"></i></a>
<a href="#" id="assign"><i class="icon-user" title="assign"></i></a>
</p>
</li>
</ul>
Я создал значки с помощью начальной загрузки Twitter и поместил их в класс «кнопки».
Спасибо за быстрый ответ, ребята!
ul.statuses li:hover {
background-color:#F7F7F7;
display: inherit;
content: url(/img.gif)
}
вы можете использовать css для отображения изображения с атрибутом содержимого
https://developer.mozilla.org/en/CSS/content
Вместо использования свойства display, которое может изменить интервал вашего внешнего интерфейса при изменении DOM, попробуйте:
ul.statuses li {opacity:0}
ul.statuses li:hover {opacity:1}
Таким образом, эффект с точки зрения пользователя будет таким же, но ваш DOM не будет подпрыгивать. Попробуйте добавить переход CSS, чтобы сделать его еще более плавным.
