Переключение между двумя пролетами в режиме разворота

Question

То, что я пытаюсь достичь, является следующим:

У меня есть div с вставленными двумя пролетами. span A и span B. По умолчанию я хочу, чтобы span A был видимым, а диапазон B был невидимым. При наведении курсора на DIV Я хочу промежутку быть заменен поверочного B. См следующее: Plnkr

<div class="answer"> 
    <span class="a">20<span> 
    <span class="b">80%</span> 
</div> 

$(".answer").hover(function(){ 
    $(".b").toggleClass(".visible"); 
}); 

Answer 1

Вы также можете использовать JQuery переключения:

$(".answer").on('mouseenter mouseleave',function(){ 

      $('.b').toggle(); 
      $('.a').toggle(); 
}); 

Ссылка на JSFIDDLE

Answer 2

Вы можете использовать hover() предоставленную JQuery (даже если только КСС достаточно):

$('#yourTag').on('hover', function(){ 
    $('#yourSpan1').hide(); 
    $('#yourSpan2').show(); 
    }, 
    function(){ 
    $('#yourSpan1').show(); 
    $('#yourSpan2').hide(); 
}); 

Answer 3

Если вы просто скрываете/показываете. Это даст вам то, что вы хотите, на основе вашего примера.

<style> 
    .answer:hover .a { display: none; } 
    .answer:hover .b { display: inline; } 
</style> 

Answer 4

$(".answer").on('mouseenter',function(){ 
     console.log("enter") 
       $('.b').show(); 
       $('.a').hide(); 
    }); 

    $(".answer").on('mouseleave',function(){ 
     console.log("leave") 
       $('.a').show(); 
       $('.b').hide(); 
    }); 

JS FILLDE demo