.who не працює, коли використовується з .html

Я намагаюся зробити просте перекидання зображення за допомогою jQuery, але цей код не працює:

HTML:

<div class="secondcircle" id="circleone">
    


</div>

JS:

$("#circleone").hover(
  function() {
    $(this).html("


"); }, function() { $(this).html("


"); } );

Миші вводять пожежі подій просто прекрасно, але жоден з них не відбувається, коли миша виходить.

Крім того, код працює з простішими діями - приклад у документах jQuery про додавання часу, що видаляється він працює просто відмінно.

Чому HTML не працює? Я застряг на цьому протягом століть.

Update: Nearly every answer/comment suggests just replacing the image source, and while this works perfectly (thanks!) sometimes I do need to change the HTML (such as to change text). This was just one example. Sorry, I should have better specified that in the question.

1
@samiles Ви не можете змінити HTML, але на основі того, що ви робите, вам не потрібно. Можна змінити властивість фонового зображення CSS, яке змінить зображення. Ви можете навіть отримати фантазію та реалізувати перевертання картки
додано Автор Dropped.on.Caprica, джерело
@samiles Ви не можете змінити HTML, але на основі того, що ви робите, вам не потрібно. Можна змінити властивість фонового зображення CSS, яке змінить зображення. Ви можете навіть отримати фантазію та реалізувати перевертання картки
додано Автор Dropped.on.Caprica, джерело
@samiles Ви не можете змінити HTML, але на основі того, що ви робите, вам не потрібно. Можна змінити властивість фонового зображення CSS, яке змінить зображення. Ви можете навіть отримати фантазію та реалізувати перевертання картки
додано Автор Dropped.on.Caprica, джерело
Перехід на CSS-маршрут заощадить вам стільки часу та зусиль. jQuery функція наведення шин досить глючна.
додано Автор Dropped.on.Caprica, джерело
Перехід на CSS-маршрут заощадить вам стільки часу та зусиль. jQuery функція наведення шин досить глючна.
додано Автор Dropped.on.Caprica, джерело
Перехід на CSS-маршрут заощадить вам стільки часу та зусиль. jQuery функція наведення шин досить глючна.
додано Автор Dropped.on.Caprica, джерело
Якщо ви використовуєте jQuery, чому ви робите document.getElementById ('circleone'). InnerHTML замість $ ('# circleone'). Html() ?
додано Автор j08691, джерело
Чи можете ви відтворити таку поведінку як jsFiddle?
додано Автор j08691, джерело
Чи намагалися ви видалити провідний код / з src?
додано Автор Justin, джерело
Ваш код виглядає добре. Єдине, про що я можу придумати, це те, як ви перевіряєте mouseleave . div - це елемент рівня блоку, тому вся ширина блоку не викличе подію ... А чому б не просто замінити src зображення замість заміни всього html
додано Автор Sushanth --, джерело
Я думаю, що проблема полягає в тому, що mouseenter (hover) прикріплений до p елементу тут, оскільки він займає повний простір div, і коли ви замінюєте його, хворобливе подія втрачається, так що ніяких mouseleave з hover тригери на ньому більше. Якщо ви спробуєте скористатися делегуванням подій у елементі div, він працюватиме.
додано Автор PSL, джерело
навіщо змінювати весь вміст html, а не тільки значення src ? А ще краще, чому б не використати фонове зображення і змінити класи?
додано Автор Mike Brant, джерело
навіщо змінювати весь вміст html, а не тільки значення src ? А ще краще, чому б не використати фонове зображення і змінити класи?
додано Автор Mike Brant, джерело
Оновлена ​​відповідь методом HTML.
додано Автор Learner, джерело
Оновлена ​​відповідь методом HTML.
додано Автор Learner, джерело
Оновлена ​​відповідь методом HTML.
додано Автор Learner, джерело
Він працює зі статичною висотою DIV, тому це не просто виклик html (): jsfiddle.net/balintbako/zPFww (і його можна легко відтворити без статичної висоти)
додано Автор Balint Bako, джерело
Я повинен був вказати на питання, що саме в цьому випадку я хотів, щоб зображення змінилося, але по всьому сайту іноді текст або все інше всередині потрібно змінити, отже, чому я використовував HTML.
додано Автор samiles, джерело
Я повинен був вказати на питання, що саме в цьому випадку я хотів, щоб зображення змінилося, але по всьому сайту іноді текст або все інше всередині потрібно змінити, отже, чому я використовував HTML.
додано Автор samiles, джерело
@ Dropped.on.Caprica Чи можна змінити innerhtml за допомогою CSS?
додано Автор samiles, джерело
@ Dropped.on.Caprica Чи можна змінити innerhtml за допомогою CSS?
додано Автор samiles, джерело
@ Dropped.on.Caprica Чи можна змінити innerhtml за допомогою CSS?
додано Автор samiles, джерело
@ j08691 На жаль, я насправді не використовував, але це було одне з багатьох речей, які я спробував і випадково скопіював неправильний код в SO, але він не мав ефекту (природно), тому змінив його.
додано Автор samiles, джерело
Код виглядає нормально. Переконайтеся, що ви дійсно переміщаєте мишу з div. Змініть колір, щоб переконатися, що ви знаєте, яку область екрана вона займає.
додано Автор Alex Polkhovsky, джерело

14 Відповіді

Чому б не зробити це з CSS?

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

Totally stole this from this question.

2
додано

Чому б не зробити це з CSS?

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

Totally stole this from this question.

2
додано

Замість того, щоб замінювати весь ваш код HTML , є краща ідея просто змінити джерело зображення.

$("#circleone").hover(function() {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function() {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);
2
додано
@samiles. Раді, що допомогли .. Ви могли також використати одинарні лапки замість espacing src = '/ ../ex/img/group2.png'
додано Автор Sushanth --, джерело
Дякуємо, це працює до тих пір, поки я видаляю ці евакуаційні риски на URL-адресу. Я повинен був вказати в q, що я хотів би використовувати HTML, оскільки я не був впевнений, що ще потрібно робити в майбутньому, але це буде робити зараз.
додано Автор samiles, джерело

Він працює, якщо ви налаштуєте його так, щоб він просто замінив img , наприклад:

http://jsfiddle.net/7etUU/

Я вважаю, що головна проблема полягає у тому, що ваш div є блоковим елементом, який охоплює 100% ширини, а потім зміст змінюється на наведенні, що видаляє вміст, тому він спалахує.

2
додано

Він працює, якщо ви налаштуєте його так, щоб він просто замінив img , наприклад:

http://jsfiddle.net/7etUU/

Я вважаю, що головна проблема полягає у тому, що ваш div є блоковим елементом, який охоплює 100% ширини, а потім зміст змінюється на наведенні, що видаляє вміст, тому він спалахує.

2
додано

Він працює, якщо ви налаштуєте його так, щоб він просто замінив img , наприклад:

http://jsfiddle.net/7etUU/

Я вважаю, що головна проблема полягає у тому, що ваш div є блоковим елементом, який охоплює 100% ширини, а потім зміст змінюється на наведенні, що видаляє вміст, тому він спалахує.

2
додано

Я думаю, що ваш div займає 100% ширину. Спробуйте додати властивість CSS "float: left". Подобається це...

.secondcircle{
    float : left;
}
1
додано

Я думаю, що ваш div займає 100% ширину. Спробуйте додати властивість CSS "float: left". Подобається це...

.secondcircle{
    float : left;
}
1
додано

Я думаю, що ваш div займає 100% ширину. Спробуйте додати властивість CSS "float: left". Подобається це...

.secondcircle{
    float : left;
}
1
додано

Вам не потрібно замінювати весь HTML на подію hover. Якщо вашою метою є змінити зображення на наведенні, використовуйте метод attr , а не http://api.jquery.com/attr/ :

HTML

<div class="secondcircle" id="circleone">
    


</div>

jQuery

$("#circleone").hover(
  function() {
      $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
  },
  function() {
    $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
  }
);

Working JsFiddle here: http://jsfiddle.net/TBMxm/1/

Крім того, це краще з точки зору продуктивності та передового досвіду.

Update1

Код jQuery, якщо ви хочете використовувати метод HTML:

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function() {
      $('#circleone p').html('');
  },
  function() {
   $('#circleone p').html(originalContent);
  }
);

Working sample using HTML: http://jsfiddle.net/TBMxm/3/

1
додано

Вам не потрібно замінювати весь HTML на подію hover. Якщо вашою метою є змінити зображення на наведенні, використовуйте метод attr , а не http://api.jquery.com/attr/ :

HTML

<div class="secondcircle" id="circleone">
    


</div>

jQuery

$("#circleone").hover(
  function() {
      $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
  },
  function() {
    $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
  }
);

Working JsFiddle here: http://jsfiddle.net/TBMxm/1/

Крім того, це краще з точки зору продуктивності та передового досвіду.

Update1

Код jQuery, якщо ви хочете використовувати метод HTML:

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function() {
      $('#circleone p').html('');
  },
  function() {
   $('#circleone p').html(originalContent);
  }
);

Working sample using HTML: http://jsfiddle.net/TBMxm/3/

1
додано

Я помітив щось дивне під час тестування цього. Його оригінальний метод не працює, поки я не додав рамки навколо батьківського div, тоді він працює просто чудово.

Хто-небудь знає, чому це може бути?

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/
1
додано

Я помітив щось дивне під час тестування цього. Його оригінальний метод не працює, поки я не додав рамки навколо батьківського div, тоді він працює просто чудово.

Хто-небудь знає, чому це може бути?

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/
1
додано

Я помітив щось дивне під час тестування цього. Його оригінальний метод не працює, поки я не додав рамки навколо батьківського div, тоді він працює просто чудово.

Хто-небудь знає, чому це може бути?

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/
1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram