Cufon - проблема с эффектами наведения и активными пунктами меню - PullRequest
Новая
       39

Cufon - проблема с эффектами наведения и активными пунктами меню

2 голосов
/ 21 февраля 2011

Я создал меню, используя шрифты cufon.

Я решил применить следующие стили к элементам меню:

  • normal: текст серого цвета
  • hover: текст черного цвета
  • active:красный цвет текста

Проблема заключается в том, что при наведении (красный) активный пункт меню в результате он возвращается к серому цвету (и выглядит как любой другой «обычный» пункт меню),Я не понимаю, почему, вы можете помочь мне исправить это?

Вот текущая конфигурация cufon: 

Cufon.replace('ul#mainmenu li > a', {
    color: '#868686',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: {
        color: '#3e3e3e'
    }
});
Cufon.replace('ul#mainmenu li.active > a', {
    color: '#af1217',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: false
});

Ответы [ 5 ]

8 голосов
/ 21 февраля 2011

взломал его MATE! 

Cufon('ul#mainmenu li.active a', {
hover: { color: '#3e3e3e'},
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li', {
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Проверьте это!- http://jsfiddle.net/3Yf4G/2/

Заменить шрифт 'BlackBeard' на ваш ...

3 голосов
/ 12 февраля 2012

На самом деле, вам нужно: 

Cufon.replace('#THE-NAME-OF-YOUR-DIV', { hover: true });

, а затем просто установите эффекты при наведении курсора из style.css или любого другого шаблона CSS. Также вы можете выделить пункт меню, представляющий текущую страницу:

CSS: 

#THE-NAME-OF-YOUR-MENU-DIV ul li a:hover,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a {
  color: #73c8ff;
}

Код Cufon: 

Cufon.replace('#THE-NAME-OF-YOUR-MENU-DIV', { hover: true });

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a', {
    color: '#73C8FF',
});

Это действительно сработало для меня несколько раз. Я смог решить большинство проблем с cufon. Меня огорчает одна проблема: я нахожу, если вам нужен курсив или полужирный курсив, иногда файл .js или что-то заставляет Cufon сделать все курсивом. Так что в основном иногда включение опции курсива приводит к тому, что все будет курсивом. В остальном проблем нет, а последнее нечасто, но постоянно. В целом, я большой фанат Cufon Fonts.

0 голосов
/ 10 июля 2012

Cufon не нравится применять несколько стилей к элементу.Поэтому используйте селектор: not, чтобы применить только первую замену cufon к тем тегам привязки, которые не являются потомками класса .active ... 

Cufon.replace('ul#mainmenu li:not(.active) > a', { 
    color: '#868686', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: { 
        color: '#3e3e3e' 
    } 
}); 
Cufon.replace('ul#mainmenu li.active > a', { 
    color: '#af1217', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: false 
});
0 голосов
/ 21 февраля 2011

У меня также были проблемы с cufon, когда вы пытались сделать что-то кроме простого вывода текста. Также это может замедлиться, это требует ресурсов.

Я бы настоятельно рекомендовал вместо этого использовать @ font-face, он работает так, как должен, слушает css и все это бесплатно / быстрее.

http://www.fontsquirrel.com/fontface/generator

0 голосов
/ 21 февраля 2011

Попробуйте установить для красного активного цвета значение! Important. 

color: '#af1217 !important'
...