Question

我尝试实现的目标如下：

我有一个插入两个跨度的div。 span A和span B。默认情况下，我希望跨度A可见，跨度B看不见。当您将鼠标悬停在div上时，我希望跨度A被跨度B替换。请参阅以下内容：Plnkr

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

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

Answer 1

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

您还可以使用jquery切换：

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

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

链接到JSFIDDLE

Answer 3

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

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

Answer 4

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

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

悬停时在div中的两个跨距之间切换

4 个答案: