Как мне увеличить масштаб текста в тени с помощью jQuery?

#jquery #html #css #cross-browser

#jquery #HTML #css #кроссбраузерный

Вопрос:

Я хотел бы воссоздать эффект в нижнем колонтитуле этого веб-сайта: http://desandro.com (наведите курсор на «Десандро сделал это» в нижнем левом углу.

Здесь они используют CSS3 и text-shadow, но я подумал, выполнимо ли это с помощью jQuery, чтобы позволить ему работать во всех браузерах?

Спасибо.

1. Возможно, это не ответ на ваш вопрос, но это действительно очень приятный эффект! (Я бы порекомендовал вам использовать способ CSS3, он гораздо более стабилен, и только IE9 его не поддерживает, Opera, FF, Chrome и Safari просто поддерживают …)

Ответ №1:

Для кроссбраузерных эффектов cs3 shadow, градиентов и закругленных углов вы можете использоватьhttp://css3pie.com на самом деле CSS3 работает во всех последних браузерах, кроме IE7 и каким-то образом IE8, поэтому css3 pie.com это решение для IEs. 😉

1. Если что-то можно легко сделать, то не усложняйте это, я имею в виду, что при добавлении jquery вам придется исправить проблемы с рендерингом в разных браузерах, и это также замедлится, когда страница будет в процессе загрузки.

Ответ №2:

вы можете сделать это

Решения:

для этого вам не нужен jquery. просто создайте класс и используйте Class_name: hover. это сработает. Ссылка на название веб-сайта, указанное вами, не использовала jquery для этого.

если вы хотите использовать jquery, обратитесь к этому, для примеров:

HTML:

 <a href="#">
    <span>David</span>
    <span>DeSandro</span>
    <span>DeSandro</span>
    <span>DeSandro</span>  
</a>

jquery:

  $(document).ready(
    $(a).hover(
       function(){
          $(this).children().eq(0).addclass('style1');
          $(this).children().eq(1).addclass('style2');
          $(this).children().eq(2).addclass('style3');
          $(this).children().eq(3).addclass('style4');
      },
      function(){ 
          $(this).children().eq(0).removeclass('style1');
          $(this).children().eq(1).removeclass('style2');
          $(this).children().eq(2).removeclass('style3');
          $(this).children().eq(3).removeclass('style4');
      });
 );

Я не уверен, поддерживает ли браузер IE этот CSS