Добавить Fadein в существующий CSS для ссылки при наведении курсора - PullRequest
Новая
       4

Добавить Fadein в существующий CSS для ссылки при наведении курсора

0 голосов
/ 27 июля 2010

Можно ли взять мою существующую CSS для ссылки при наведении курсора с фоновым изображением и заставить ее исчезать и исчезать?Каков наилучший подход для Fadein / Out?Я уже использую jquery. 

.sendB {
    width: 100%;
    height: 125px;
    background: #5266EB url('/img/send.gif') no-repeat 50% 0;
    margin-top: 22px;
    float: left;
}

.sendB:hover {
    width: 100%;
    height: 125px;
    background: #00CE00 url('/img/send.gif') no-repeat 50% -125px;
    margin-top: 22px;
    float: left;
}

Ответы [ 2 ]

1 голос
/ 27 июля 2010

jQuery не может напрямую затенять фоновое изображение.Это должно применить изменение непрозрачности ко всему элементу.То, как я делал это в прошлом, заключается в том, чтобы вложить элемент внутрь, дать ему фоновое изображение, а затем затемнить весь элемент.Разметка будет: 

<a class="sendB" href="...">
    <span class="background-image-to-fade"></span>
</a>

Как только вы получите это, это просто вопрос: 

$('.sendB').hover(
    function(){
        $(this).fadeIn();
    },
    function(){
        $(this).fadeOut();
    }
);
0 голосов
/ 27 июля 2010

Я не думаю вы можете получить доступ к psuedoclasses с помощью JavaScript.

Однако, если вы изменили этот селектор, включив в него также .sendB.hover, вы можете получить это с помощью jQuery.

Одна вещь, которую нужно знать, это то, что вы не можете затемнить фоновое изображение. Вам нужно будет добавить фактическое изображение или элемент внутри с фоновым изображением. Вам нужно будет использовать абсолютное позиционирование.

...