В CSS, возможно ли, что когда я опрокину один элемент, я делаю еще один элемент видимым? У меня есть значок, и когда кто-то меня обманывает, я хочу, чтобы он сделал видимым текстовым элементом, который описывает, что делает значок.CSS - Переверните один элемент и сделайте видимым другой элемент
ответ
Вот только CSS-подсказка, которую я использую все время :) Отлично работает даже в IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Надеюсь, это поможет.
уверен, что это!
.me:hover span { display: block; }
Если вы хотите, чтобы показать элемент, который не является потомком элемента парил вам, возможно, придется использовать Javascript
согласен с рекомендацией JavaScript. В частности, jQuery является простым и наиболее подходящим для логики поведения страницы. Я думаю, что CSS должен быть только выглядеть/чувствовать/стиль ... Javascript должен быть всем вашим логикой событий и поведения.
Вы можете сделать ребенка-элементы видны при наведении на родителя (как Hunter suggests), или братья и сестры:
span:hover + span {display: block; }
Есть, возможно, некоторые незначительные проблемы совместимости кросс-браузер, но с правильным DOCTYPE Я думаю, IE7 + в порядке с селекторами братьев (хотя я не пытался проверить эту теорию).
Вот немного похлопал-вместе пример, который не будет работать в IE ...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
Но вы действительно должны просто использовать JQuery.
- 1. Переверните один элемент, откройте еще
- 2. Фокусировка и один элемент должны отражать другой элемент в CSS
- 3. Сделайте копию набора и исключите один элемент
- 4. CSS, наведите один элемент, повлияйте на другой
- 5. Один элемент делает другой
- 6. Сделать другой элемент видимым/не видимым на основании значения флажка
- 7. CSS Hover Другой элемент
- 8. Наведите один элемент, выберите другой
- 9. CSS Layout: один элемент перекрывает другой и достигает границы контейнера
- 10. Скрыть элемент при наведении на другой элемент
- 11. Переверните дочерний элемент сетки, чтобы показать другой вид.
- 12. Сделайте элемент с полной высотой (HTML/CSS)
- 13. Является ли элемент видимым?
- 14. Переключить один элемент и добавить класс в другой элемент jquery
- 15. Python: переверните один элемент в списке на два элемента:
- 16. Приращение, когда элемент становится видимым?
- 17. jQuery Если один элемент виден, закройте другой
- 18. Наведите указатель мыши на один элемент, чтобы изменить другой элемент.
- 19. сделать один элемент видимым и еще 49 невидимым
- 20. Получение один элемент и фильтр другой
- 21. zebra css игнорирует один элемент?
- 22. CSS Hover target другой элемент
- 23. Сделать элемент HTML-карты видимым
- 24. Сделать один элемент управления ASP.NET Panel видимым поверх другого содержимого
- 25. Наведите элемент на другой элемент
- 26. onclick показать элемент и скрыть другой элемент
- 27. jQuery - изменение высоты элемента, если другой элемент становится видимым
- 28. CSS: Наведите указатель мыши на один элемент, эффект другой?
- 29. ASP Сделать невидимым элемент видимым
- 30. CSS - Hover один элемент, Изменить видимость на другой
вот скрипка http://jsfiddle.net/c0owz9qb/ – suhailvs