悬停时在div中的两个跨度之间切换[重复]

Question

我尝试实现的目标如下：

我有一个插入了两个跨度的 div。 span A 和 span B。默认情况下，我希望跨度 A 可见，跨度 B 不可见。当您将鼠标悬停在 div 上时，我希望将 span A 替换为 span 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

$(".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

Answer 3

如果您只是隐藏/显示。这将根据您的示例为您提供所需的内容。

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

Answer 4

你可以使用jQuery提供的hover()（即使只有css就足够了）：

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