Cufon 중첩 호버 문제

Question

여러 목록을 사용하고 호버를 사용하면 '부모'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});

---

Selectors + 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을 모르고 당신이 무엇을하려고하는지 정말로 이해하지 못합니다. 특히 나는 당신이 당신처럼 cufon에 전달 된 옵션을 사용한다는 의미인지 확실하지 않습니다.

간에 차이가 있습니다

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

그리고

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

첫 번째 세트 fontWeight 요소가 호버링되면 Fontweight를 200으로 설정하면이 경우에만 눈에 띄게됩니다. fontWeight 그 동안 변경되었습니다.

후자는 요소의 스타일 만 변경합니다. fontWeight 200은 맴돌고 요소가 더 이상 호버링되지 않을 때 무게를 제거합니다.

나는 당신이 어떤 것을 사용하려고하는지 잘 모르겠습니다.