Публикувано на 10 март, 2009 в CSS с етикети CSS, Design, DIV, XHTML
Променянето на цвета на текста при позициониране курсора на мишката върху div, е всъщност доста просто нещо и след като прочетете това, сами ще се уверите. Нека първо уточним по какъв друг начин може да бъде полезно, освен при ефектния дизайн, където най-често намира приложение. Обикновено, когато създаваме един дизайн, правим линковете да изпъкват над останалото съдържание, като им прилагаме по-тъмен цвят. Представете си, че имаме стотици линкове в няколко параграфа, очите на потребителите ще бъдат прекалено натоварени с голямата бъркотия, която се създава.
Едно от решенията в този случай е да направим всички линкове по-светли и едва когато потребителя позиционира мишката над конкретен div, тези линкове да се активират и да изпъкнат над останалия текст. Тук можете да видите крайния резултат.
Това е XHTML кода:
<div id="links"> <h3>Пример</h3> <p>Това, което откриваш сам, е винаги по-вълнуващо от това, което някой друг ти показва - това е като разликата между истинската любов и нагласената сватба.</p> <ul> <li><a href="#">Не е страшно, че грешим. Страшното е, че повтаряме грешките си</a>.</li> <li><a href="#">Отмъщението не</a> връща <a href="#">загубеното</a>.</li> <li><a href="#">Колкото повече, толкова повече</a>!</li> <li><a href="#">Ако съдбата ти затваря вратата, влез през прозореца</a>!</li> <li><a href="#">В истината има повече красота</a>, дори когато <a href="#">красотата е отвратителна</a>.</li> <li><a href="#">Единственият начин</a> да се отървеш <a href="#">от изкушението</a> е да му се <a href="#">отдадеш</a>.</li> <li>Не е важно да получиш това, <a href="#">което цениш</a> , а да оцениш това, <a href="#">което получаваш</a>.</li> <li><a href="#">Това, което прави живота интересен, е възможността да осъществиш мечтата си</a>.</li> <li><a href="#">Когато човек силно желае нещо, цялата Вселена му съдейства. </a>.</li> <li>Aко не умееш <a href="#">да говориш,</a> научи се <a href="#">да мълчиш</a>.</li> <li><a href="#">Не се страхувай от съвършенството - никога няма да го достигнеш </a>.</li> <li>Всичко хубаво <a href="#">се постига с цената на</a> голяма болка.</li> <li><a href="#">При липса на данни най-простото обяснение се приема за вярно. </a></li> <li>Поражение не съществува, <a href="#">докато човек не се признае за победен</a>!</li> <li><a href="#">Има само едно нещо</a>, <a href="#">което е по-хубаво от гърненце с мед...</a> и това са <a href="#">две гърненца с мед</a>.</li> </ul> </div></code>
CSS код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | div#links { color: #36393e; border: 2px solid #36393e; background-color:#f7facf; padding: 10px; width: 240px; } html > body div#links { width: 520px; } div#links ul { margin: 0 0 0 19px; padding: 0; } div#links ul li { margin: 0 0 .5em 0; } html > body div#links ul li a { color: #36393e; text-decoration: none; } div#links:hover ul li a { color: #0890ca; text-decoration: underline; } div#links ul li a:hover { background-color: #0890ca; color: #f7facf; text-decoration: none; } |
За всеобщо съжаление не работи под IE.
Аз го тествах под IE7 и IE8 – работи, единствено не работи под IE6 и то защото той не разпознава div:hover, за това пък съм добавил стила на линковете с child selector, защото отново IE6, не го разпознава и така пропуска този код и линковете, не се сливат с останалия текст.
Напоследък все по-често се дразня и аз на IE6, но колкото и да не ми е кеф, трябва да се поддържа. Затова може би едно добро решение е нещо от рода на:
if(jQuery.browser.msie && jQuery.browser.version == 6) {
$(„*“).hover(function() { $(this).addClass(„hover“); }, function() { $(this.removeClass(„hover“); })
}
Т.е. чрез JavaScript и jQuery, при hover на елемент се добавя класа „.hover“.
И тогава чрез леко пипване на CSS-a, поддържаме IE6:
div#links:hover ul li a, div#links.hover ul li a { /* Забележете „, div#links.hover“ */
color: #0890ca;
text-decoration: underline;
}
Надявам се коментара ми да ти е помогнал :)
Поздрави,
Любо