Удалить: фокус с jquery

У меня есть поле ввода. Когда пользователь сосредоточится на этом поле, фон этого поля изменится.

У меня есть ссылка и на моей странице. Я хочу удалить :focus, когда мышь наводится на эту ссылку, и пользователь находится в этом поле ввода.

Я использую removeClass(':focus'), но этот код не работает!

HTML:

<form>
    <input type="text" name="email" />
</form>
<a href="#" id="link">Sample Link</a>

JavaScript:

$(document).ready(function () {
    $('#link').hover(function (){
        $('form input[name=email]').removeClass(':focus');        
    }, function (){
        $('form input[name=email]').addClass(':focus');        
    });
});

CSS

form input[name=email]:focus {
    background-color: yellow;    
}

Вот сценарий для вышеуказанного

Что мне делать?

Ответ 1

Вам нужно использовать встроенный blur и focus:

$(document).ready(function () {
    $('#link').hover(function (){
        $('form input[name=email]').blur();
    }, function (){
        $('form input[name=email]').focus();
    });
});

Ответ 2

Попробуйте следующее:

$(document).ready(function () {
$('#link').hover(function (){
     $("input").blur(); 
 }, function (){
      //mouse leave  
});
});

Рабочий FIddle

Ответ 3

Попробуйте следующее:

$(document).ready(function () {
    $('#link').hover(function (){
        $('form input[name=email]').blur();  
        $('form input[name=email]').css("background-color","");     
    }, function (){
        $('form input[name=email]').focus(); 
        $('form input[name=email]').css("background-color"," yellow");       
    });
});