Проблема с вложенным наведением курсора Cufon

Question

При использовании нескольких списков и состояний наведения курсора "родительский" стиль 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>

Answer 1

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

//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-го уровня будут иметь вес шрифта 700 до наведения курсора мыши, затем они получат значение веса шрифта 200.

Если вы измените порядок

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

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

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

---

Неопределенность

Я не знаю Cufon и на самом деле не понимаю, что вы пытаетесь сделать.Особенно я не уверен, собираетесь ли вы использовать параметры, переданные в Cufon, как вы это делаете, или вы на самом деле хотите просто установить FontWeight при наведении курсора мыши.

Существует разница между

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

и

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

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

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

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