<p>Обнаружил такую проблему: <a title=”Cufon” href="https://github.com/sorccu/cufon” target=”_blank” rel=”noopener”>Cufon</a> (заменитель шрифтов, см. <a title=”Cufón – используйте шрифты, какие душа пожелает” href=”http://habrahabr.ru/post/61033/" target=”_blank” rel=”noopener”>здесь</a> и <a title=”Нестандартный шрифт средствами js” href=”http://www.marketer.ru/adv/production/dizajn/tipografika/cufon-nestandartnyj-shrift-sredstvami-js/" target=”_blank” rel=”noopener”>здесь</a>) прекрасно менял все шрифты, цвета и т.п. Но в одном месте ни в какую не хотел изменять цвет шрифта при наведении (:hover).<br />Оказалось, что если ссылка, которая должна hover’иться, находится внутри другого блока текста, который уже обработан Cufon’ом, то она не сможет изменить цвет (!), border и некоторые другие свойства будут меняться без проблем.<br />Итак, ниже показываю, в каких случаях hover’а не происходит, а в каких происходит (в коде все понятно). Либо можно скачать <a href=”/media/uploads/2018/11/09/cufon-test.zip” target=”_blank” rel=”noopener”>архив, вместе со шрифтами</a>, и самому посмотреть.</p>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test/jquery00.js"></script>
<script type="text/javascript" src="test/cufon-yu.js"></script>
<script type="text/javascript" src="test/Plumb_20.js"></script>
<style>
a, a:link, a:visited { color : #0000cc; }
</style>
</head>
<body>
<div class="example">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала внешнего блока, потом ссылки [hover'а нет]</a> ipsum</div>
<div class="example2"><span class="example">Lorem</span> <a href="#" class="ahref">Ссылка, не вложенная в элемент с Cufon'ом, внутри текста</a> <span class="example">ipsum</span></div>
<div class="example2">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала ссылки, потом внешнего блока</a> ipsum</div>
<div class="example2">Lorem <a href="#">Ссылка без явного указания класса [hover'а нет]</a> ipsum</div>
<a class="ahref" href="#" >Ссылка, не вложенная в другие элементы, которые обрабатываются Cufon'ом</a></p>
<p><script type="text/javascript">
Cufon('.example');
Cufon('.ahref', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example a', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example2');
</script>
</body>
</html>