在悬停中的两个跨度之间切换

我有插入两个跨度的div。 span A和span B。默认情况下，我希望跨度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"); 
});

来源

2014-11-25 Mark Klaarenbeek

为什么你需要的jQuery的是，应该很容易，只需CSS – adeneo 2014-11-25 09:41:06

http://plnkr.co/edit/r oVdfancAMK82bsGrBYM？p =预览 – adeneo 2014-11-25 09:42:20

请始终在问题中包含您的代码。 – 2014-11-25 09:43:05

您还可以使用jQuery切换：

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

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

链接JSFIDDLE

来源

2014-11-25 12:27:23 HowieH

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

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

来源

2014-11-25 09:42:22 Saksham

如果您只是隐藏/显示。根据你的例子，这会得到你想要的。

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

来源

2014-11-25 09:43:24 rdubya

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

来源

2014-11-25 09:55:09

在悬停中的两个跨度之间切换

回答

相关问题