Вопрос по html, dom-manipulation, hover, jquery – заменить один div с другим при наведении

5

Я хочу заменить один div другим при наведении на него курсора. В частности, будет в среднем в словах, таких как "изо всех сил» или же "превзойти ожидания "и я хочу заменить это числовым средним, когда пользователь наводит курсор на среднее значение в словах.

#html


  A+ (hover to see score)  


  AVG = 98.35%


#css

.avg_num {
display: none;
}

#jquery

$('.switch').hover(function() {
    $(this).closest('.avg_words').hide();
    $(this).next('div').closest('.avg_num').show();
}, function() {
    $(this).next('div').closest('.avg_num').hide();
    $(this).closest('.avg_words').show();
});

Это'Достаточно просто спрятать первый div и заменить его вторым, но проблема в коде, который восстанавливает нормальное состояние после окончания зависания. Теперь на висениеdivпросто моргайте взад-вперед между собой.

http://jsfiddle.net/uXeg2/1/

Как вы можете сделать это только с CSS? Любой хороший ресурс? masciugo
Мне все равно удалось:jsbin.com/nazase/3/edit?html,css,output, Любой совет приветствуется masciugo
принятый ответ - лучший и самый простой способ сделать это, я думаю dax
вау этодействительно красивое решение, красиво сделано! dax

Ваш Ответ

4   ответа
4

Мигание - это результат того, как вы настроили свои классы. Так как.switch а также.avg_words точно такой же элемент, вот что происходит:

  1. Ты паришь.switch
  2. .avg_words скрыто, что означает.switch скрыт (этоэто же див!)
  3. поскольку.switch скрыто, ты больше не паришь
  4. .avg_words показывается сразу
  5. Вы сейчас зависли.switch еще раз, потому что это было только что показано (на шаге 4)
  6. вернуться к шагу 1

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

Я думал, что это может быть частью проблемы - я играл с этим некоторое время, но не могзаставить вещи работать из-за слоев div. (Не мог»т выяснить правильное расположениеnext использовать). Спасибо! dax
10

<div class="switch">
<div class="avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>
</div>

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});

Обновленная скрипка:http://jsfiddle.net/uXeg2/2/

А не было»не знаю, как использоватьfind - поехали! Спасибо :) dax
поиск в контексте вашего селектора, который вы не сделаликак обаdivгде на том же уровне. Вложение не делаетЯ всегда делаю код красивым, но в таких случаях это действительно помогает. Andrew Grothe
Или то, что сказал Стефан Мюллер .... Andrew Grothe
1

буду использоватьmouseover а такжеmouseout для этого:

$('.switch .avg_words').mouseover(function() {
    $(this).hide();
    $(this).closest('.avg_num').show();
});

$('.switch .avg_num').mouseout(function() {
    $(this).hide();
    $(this).closest('.avg_words').show();
});
Тот'Что за функция наведения ... Andrew Grothe
@agrothe не совсем, hover работает для того же элемента, эта альтернатива работает при наведении мыши на первый, затем на наведение мыши для второго;) Zathrus Writer
достаточно верно. Я просто стараюсь не писать такой код сам, но этоЯ думаю, это просто личное предпочтение. Andrew Grothe
2

Вы сталкиваетесь с проблемами, потому что выскрывая тот же элемент, который связан с событием hover. Попробуйте изменить разметку:

A+ (hover to see score)
AVG = 98.35%

Затем измените свой JavaScript на что-то вроде этого:

$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});

Похожие вопросы