Блог

Главная - Вопросы по программированию - Исчезает в тексте с помощью метода содержимого CSS при наведении

Исчезает в тексте с помощью метода содержимого CSS при наведении

#jquery #css

#jquery #css

Вопрос:

Я пытаюсь fadeIn текст на элементе с помощью метода содержимого CSS, но, похоже, он не работает. мой код выглядит так, как показано ниже. Это невозможно или это может быть достигнуто.

HTML

  <div id="share-box">
   <i class="fa fa-rss"></i>
 </div><!-- End Share Box -->

CSS

 #share-box {
float: right;
height: 100px;
font-size: 72px;
width: 80px;
color: #fff;
font-weight: lighter;
padding-top: 15px;
background-color: #E18728;
padding-left: 25px;
cursor: pointer;
        }

#share-box:before {
content: 'RSS';
position: absolute;
font-size: 24px;
padding: 70px 0 0 15px;
display: none;
    }

Скрипт

 jQuery(document).ready(function(){ 

 $("#share-box").mouseover(function(){

 $("#share-box:before").stop().fadeIn();

  });



 $("#share-box").mouseout(function(){

 $("#share-box:before").stop().fadeOut('slow');

  });

});

Ссылка на скрипку

Комментарии:

1. Не могли бы вы, пожалуйста, поделиться скрипкой, если это возможно?

2. Почему бы просто не использовать :hover селектор и не изменить непрозрачность? JavaScript не требуется

3. jquery при наведении курсора мыши начинается с «i» вместо «$». Это опечатка или у вас есть такой код.

4. :before не является элементом dom. таким образом, jquery не будет работать над :before.

5. Вы не можете выбрать псевдоэлементы с помощью JS.JQ, поскольку их нет в DOM

Ответ №1:

Как прокомментировал @Phil, вы могли бы просто использовать :hover псевдокласс вместе с transition для достижения этой цели. JS на самом деле не требуется.

Демонстрация: http://jsfiddle.net/abhitalks/z3A33 /

 #share-box:before {
    ...
    opacity: 0; /* use opacity to get it working with transition */
    -webkit-transition: all 1s; /* use transition to get fading effect */
    transition: all 1s; /* use standards after vendor prefixes */
}
#share-box:hover::before {
    opacity: 1; /* change opacity on hover */
}

Примечание: вам нужно что-то вроде opacity , чтобы заставить переход работать. Переходы не будут работать display .