Наведите курсор на элемент и измените непрозрачность другого элемента в другом элементе div - PullRequest
Новая
       26

Наведите курсор на элемент и измените непрозрачность другого элемента в другом элементе div

1 голос
/ 28 июня 2011

Я пытаюсь создать эффект, при котором при наведении курсора на элемент списка изменяется непрозрачность изображения (в совершенно другом элементе div) с 0 на 1. У меня нет проблем с этим в CSS при наведении курсора на элемент.Сам img или его родительские элементы.Но это ставит меня в тупик.Вот что у меня есть (я действительно новичок в jquery, так что, возможно, все не так)в том, что мне нужно три разных объявления при наведении курсора для каждой из трех комбинаций li / img.Как я уже сказал, я очень плохо знаком с jquery, поэтому извините, если ответ прост.Я действительно искал доски и не мог найти решение.Конечно, я бы предпочел найти решение css, но я не думаю, что оно есть.

Обновление / Решение:

@ Джейсон.Вот ваш jquery немного изменился, чтобы сделать именно то, что я хотел.Я избавился от первого объявления, так как у меня уже была непрозрачность, установленная на 0 в CSS, и мне не требовался jquery для этого.Затем при наведении курсора на li изменяется непрозрачность изображений с помощью .css.Проблема заключалась в использовании .css для изменения непрозрачности обратно до 0. Она сохраняла объявление встроенного стиля, которое не соответствовало правилам в моей таблице стилей.Так что теперь, когда hover заканчивается, я просто удаляю атрибут встроенного стиля вместе с .removeAttr ('style').

Спасибо за помощь! 

$("#one").hover(function () {
    $('#img-one').css({opacity : 1.0});
  },
  function () {
    $('#img-one').removeAttr("style");
  }
);

$("#two").hover(function () {
    $('#img-two').css({opacity : 1.0});
  },
  function () {
    $('#img-two').removeAttr("style");
  }
);

$("#three").hover(function () {
    $('#img-three').css({opacity : 1.0});
  },
  function () {
    $('#img-three').removeAttr("style");
  }
);

Ответы [ 2 ]

1 голос
/ 28 июня 2011

Возможно, есть более элегантный способ сделать это ... но быстрый и грязный: 

$("#img-one, #img-two, #img-three").css('opacity','0');

$("#one").hover(function () {
    $('#img-one').css({opacity : 1.0});
  }, 
  function () {
    $('#img-one').css({opacity : 0.0});
  }
);

$("#two").hover(function () {
    $('#img-two').css({opacity : 1.0});
  }, 
  function () {
    $('#img-two').css({opacity : 0.0});
  }
);

$("#three").hover(function () {
    $('#img-three').css({opacity : 1.0});
  }, 
  function () {
    $('#img-three').css({opacity : 0.0});
  }
);

http://jsfiddle.net/jasongennaro/KdhPG/

0 голосов
/ 28 июня 2011

Ваш код выглядит следующим образом: 

 $(".one, .two, .three").hover(function(){
 $(".img-one, .img-two, .img-three").css({ opacity:1.0 });
 });

оно должно быть: 

 $("div#header li").hover(function() {
     $("#img-one, #img-two, #img-three").css({ opacity:1.0 });
 },function () {
     $("#img-one, #img-two, #img-three").css({ opacity:0.0 });
 });

В Jquery вы можете вызывать элемент по его идентификатору, обозначив # знаком и класс с .(dot) знак

НОВОЕ ОБНОВЛЕНИЕ:

Смотрите окончательную демонстрацию, как хотите: http://jsfiddle.net/rathoreahsan/7NCQu/20/

...