Блог

Я пытаюсь создать элемент, похожий на область твитов Twitter. При наведении курсора мыши DIV должен иметь другой цвет с новым положением фонового изображения.

Затем, когда пользователь нажимает, положение фонового изображения должно снова переместиться, а цвет фона должен меняться только тогда, когда пользователь не находится при наведении курсора мыши. Я пробовал это, но это не сработает.

JS —

 function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}
  

CSS —

 #reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}
  

HTML

 <div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>
  

Есть идеи, что не так. Новый класс не требует применения к элементу.

Чудесно

 $(id).addClass('ractive');
  

не получает правильный селектор. Исходя из вашей разметки, которую вы должны выполнять.

 $('.review').click(function() {
    $(this).addClass('ractive');
});
  

Затем вы должны удалить onclick="reviews(this); из своей разметки. Если вы используете jquery для применения классов, придерживайтесь этого подхода в целом. Не смешивайте навязчивый и ненавязчивый javascript. Опубликованный выше код добавит ractive класс только к ссылке, на которую вы нажали.

Кроме того, измените свой css с #reviews .review .ractive на просто #reviews .ractive. Ваш класс ищет элемент внутри review с помощью класса ractive, вам это не нужно, поскольку класс находится в том же элементе

 #reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}