Блог

Главная - Вопросы по программированию - Использование Jquery для изменения цвета текстовой ссылки при переносе связанного изображения

Использование Jquery для изменения цвета текстовой ссылки при переносе связанного изображения

#jquery #css

#jquery #css

Вопрос:

Мой клиент предоставил мне интересный веб-сайт для написания кода. В принципе, проектов много. Названия проектов и краткие описания перечислены в левом столбце. С каждым проектом связано изображение, размещенное в правой колонке. На каждое изображение накладывается цвет — при перемещении по изображению наложение удаляется, показывая изображение под ним в его естественных цветах. (Это было достигнуто с любезной помощью кого-то еще на этом форуме, используя Jquery).

Что теперь хочет сделать клиент, так это изменить цвет текстовой ссылки проекта, когда пользователь пролистывает изображение. Например. Когда пользователь пролистывает изображение «Atlantic Yarns», клиент хочет, чтобы текстовая ссылка «Atlantic Yarns» справа была пролонгирована синим цветом. Клиент также хочет, чтобы это работало другим способом — когда пользователь перемещает текстовую ссылку, наложение удаляется с изображения. Я в недоумении, как это сделать, даже не уверен, что это можно сделать, но клиент настаивает! Пожалуйста, кто-нибудь может помочь?

Демонстрационный сайт здесь:http://dob.ck-services.co.uk

Ответ №1:

 $('a > img').hover(function() {
    var a = $(this).closest('a');
    $('a[href="'   a.attr('href')   '"]').not(a).addClass('hover');
}, function() {
    var a = $(this).closest('a');
    $('a[href="'   a.attr('href')   '"]').not(a).removeClass('hover');
});

Затем вам просто нужно добавить правило CSS для a.hover , которое применяет те же стили, что и
a:hover , например:

 a:hover, a.hover {
    color: #0f0;
}

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

1. Привет, ThiefMaster, спасибо за это, я установил его, но не смог заставить его работать. Прав ли я, думая, что он находит ближайший тег <a> и добавляет к нему class=»hover»? Если это так, то, вероятно, это не сработает, поскольку не всегда требуется изменять ближайший тег <a>, благодаря дизайну клиента. У вас есть какие-либо дополнительные идеи?

2. Нет, он берет href из ближайшего (в вашем случае: родительского) a тега и берет другой тег a с точно таким же href и добавляет класс к этому. Я протестировал это через firebug console на вашем сайте, и это сработало нормально.

Ответ №2:

Попробуйте приведенный ниже код. 

 jQuery("#right_col").children().hover(
function(){//hover over
  var $this = jQuery(this);
  var id = $this.attr("id");
  jQuery("#"   id   "_desc").find("a").addClass("projectHover");
  $this.find(".blueoverlay").hide();
}, function(){//hover out
  var $this = jQuery(this);
  var id = $this.attr("id");
  jQuery("#"   id   "_desc").find("a").removeClass("projectHover");
  $this.find(".blueoverlay").show();
});

Этот код также имеет эффект наведения курсора мыши на изображение, что вы уже делаете. Итак, удалите другой код.

ПРИМЕЧАНИЕ: Пожалуйста, добавьте класс below в свой CSS.

 .projectHover{color: red;}

Ответ №3:

Учитывая сходство идентификаторов, не могли бы вы сделать что-то подобное? 

 $('#right_col a img').hover(function(){
    $parentname = $(this).closest('div').attr('id');
    $('#' $parentname '_desc a').toggleClass('hover');
});

$('#left_col h2 a').mouseover(function(){
    $parentname = $(this).closest('div').attr('id');
    $imgname = $parentname.replace(/_desc/i,'');
    $('#'   $imgname).mouseover();
}).mouseout(function(){
    $('#'   $imgname).mouseout();
});

А затем добавьте CSS в класс .hover, как упоминалось выше, вот так?

 #project1_desc a:hover, #project1_desc a.hover {
  color: #4F99FF;
}