В 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>
Надеюсь, это поможет.
Вы можете сделать видимыми дочерние элементы, наведя курсор на родителя (как Охотник предлагает ), или братьев и сестер:
span:hover + span {display: block; }
Возможно, есть некоторые незначительные проблемы совместимости между браузерами, но с действительным типом документа, я думаю, IE7 + подходит для селекторов одного уровня (хотя я не пытался проверить эту теорию).
уверен, что это так!
.me:hover span { display: block; }
Если вы хотите показать элемент, который не является дочерним элементом для обнаруженного элемента, вам может понадобиться использовать javascript
Вот небольшой пример, который не работает в 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.
Согласен с рекомендацией JavaScript. В частности, jQuery прост и наиболее подходит для логики поведения страниц. Я думаю, что CSS должен быть только выглядеть / чувствовать / стиль ... Javascript должен быть, где все ваши события и логика поведения.