当悬停改变文本问题

我试图让你的鼠标悬停在“框”上时，它改变了它里面的文字。但是，复选标记/错误标记与“关注”或“取消关注”之间似乎存在分行。为什么？当悬停改变文本问题

HTML：

<a class="afp" href="demo.html"> 
<span class="addfriend2"> 
<span class="fr1"> 
<font color="#33FF00">&#x2713;</font > Following 
</span> 
<span class="fr2"> 
<font color="#FF0000">&#x2717</font> Unfollow 
</span> 
</span> 
</a>

CSS：

.addfriend2 { 
     border-radius: 15px; 
     background: #517eca; 
     padding: 8px; 
     margin-left: 30px; 
     text-align: center; 
     font-size: 14px; 
    } 
    a.afp{ 
     text-decoration: none; 
     color:#000000; 
    } 
    a.afp:visited{ 
     text-decoration: none; 
     color:#000000; 
    } 
    a.afp:active{ 
     text-decoration: none; 
     color:#000000; 
    } 
    span.fr2{ 
     display:none; 
    } 
a.afp:hover span.fr1{ 
    display:none; 
} 
a.afp:hover span.fr2{ 
    display:inline; 
}

来源

2011-03-27 Deniz Zoeteman

我没有看到换行符的问题，在什么浏览器下你看到这个问题？ – 2011-03-28 00:03:48

哪个浏览器给你提问？我在FF 3.6，Chrome 10，Safari 5.0（Windows）和IE 9中试过你的代码，唯一错误的是在Unfollow之前丢失的分号，这意味着IE没有显示交叉。 – 2011-03-28 00:04:54

奇怪的是将取消关注前缺少分号当问题得到了解决。

来源

2011-03-28 00:12:37

当悬停改变文本问题

回答

相关问题