문제
여러 목록을 사용하고 호버를 사용하면 '부모'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>
해결책
솔루션 먼저 : 요소 세트가 겹치는 곳에서 일치하는 일치를 생성하지 않는 선택기를 사용하십시오.
//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은 맴돌고 요소가 더 이상 호버링되지 않을 때 무게를 제거합니다.
나는 당신이 어떤 것을 사용하려고하는지 잘 모르겠습니다.