Cufon Nested Hover Problem - PullRequest
Новая
       7

Cufon Nested Hover Problem

0 голосов
/ 01 декабря 2009

При использовании нескольких списков и состояний наведения «родительский» стиль Cufon заменяет дочерний. В следующем примере при наведении на ссылку второго уровня она будет заменена другим весом.

Можно ли установить опцию, чтобы вложенный стиль оставался прежним или это ошибка / ограничение в Cufon? 

    <ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a><ul>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
    </ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/js/cufon.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/fonts/Vegur.font.js"></script>


<script type="text/javascript">
    Cufon.replace('ul li a',{hover: true, fontWeight: 200});
    Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 
</script>

1 Ответ

6 голосов
/ 01 декабря 2009

Решение в первую очередь: Используйте селекторы, которые не создают совпадений там, где набор элементов перекрывается. 

//selects only 1st level links
Cufon.replace('ul:has(ul) > li   a', { hover: true, fontWeight: 200});
//selects only 2nd level links
Cufon.replace('ul:not(:has(ul)) a', { hover: true, fontWeight: 700});



Объяснение, почему ваши селекторы + Cufon создают проблемы

Кажется, проблема связана с вами, селекторы. 

ul li a --> selects all 8 occurrences of <a>
ul li ul a --> selects only the 3 second-level occurrences of <a>

Это означает, что вы на самом деле дважды указали fontWeight для тегов <a> второго уровня. К сожалению, Cufon, похоже, не применяет только выражение, которое имеет наибольшую CSS-специфичность , поэтому поведение будет зависеть от того, как Cufon хранит несколько совпадений, подобных этому.

После нескольких тестов кажется, что Cufon применяет стили в обратном порядке, в котором вы вызываете операторы replace(). Например,

Если вы делаете 

Cufon.replace('ul li a',{hover: true, fontWeight: 200});
Cufon.replace('ul li ul a',{hover: true, fontWeight: 700});

Все ссылки будут выделены синим цветом, а ссылки 2-го уровня имеют fontWeight 700 до наведения, после чего они установят fontWeight 200.

Если вы переключите заказ 

Cufon.replace('ul li ul a',{hover: true, fontWeight: 700});
Cufon.replace('ul li a',{hover: true, fontWeight: 200});

Изначально все ссылки будут иметь fontWeight 200, ссылки 2-го уровня получат 700 при наведении.

Вы замечаете, что поведение меняется в зависимости от порядка ваших звонков.


Неуверенность

Я не знаю Куфон, и я действительно не понимаю, что вы пытаетесь сделать. Особенно я не уверен, хотите ли вы использовать параметры, переданные в Cufon, как вы, или же вы действительно хотите просто установить fontWeight при наведении.

Есть разница между 

Cufon.replace('ul li a', { hover: true, fontWeight: 200 } );

и 

Cufon.replace('ul li a', {
    hover: { fontWeight: 200 }
});

Первый устанавливает fontWeight на 200, а если элемент наведен, также устанавливает fontWeight на 200, что было бы заметно только в том случае, если fontWeight за это время изменилось.

Последний изменяет стиль элемента только на fontWeight 200 во время наведения и снимает вес, когда элемент больше не наведен.

Я не уверен, какой вы собираетесь использовать.

...