在溢出时仅应用悬停效果

Question

我正在尝试仅在发生溢出时应用悬停样式。 例如：

.email{
    overflow:hidden;
 }

 /*apply only when email is too long*/
 .email:hover{
    overflow:visible;
    background-color:red;
 }

有没有一种方法可以实现我想要的功能？

谢谢回答。

编辑： 我已经在http://jsfiddle.net/mQA4L/添加了一个jsfiddle来演示我想要做什么。

- Wei Ma

---

我认为你可以使用Javascript来完成这个任务。 - tjons

你能否在jsFiddle.net上添加一些内容并展示你的问题？这样更容易理解你所遇到的问题。 - Siva

因此，可见性实际上是无关紧要的，因为如果电子邮件很短，即使更改为“visible”显示也不会有任何影响。换句话说，就可见性而言，您所拥有的内容运行良好。但是，如果只有在电子邮件太长时才希望在悬停时出现背景颜色，那么呢？ - ScottS

是的，我正在设置背景，因为我希望它覆盖其他内容。当电子邮件内容没有溢出时，鼠标悬停时无需更改背景颜色。 - Wei Ma

Answer 1

你不能仅使用 CSS 来实现此功能，必须使用 JavaScript 并检查电子邮件地址是否过长。

编辑：

$(function(){
    $('.email').hover(
        function() {
            var width = parseInt($(this).css('width'));
            if (width > 50) {
                $(this).addClass('overflowBg');
            }
        },
        function() {
            $(this).removeClass('overflowBg');
        }
    );
});

这里是一个可运行的例子，希望我理解得没错 http://jsfiddle.net/mQA4L/25/

- Ekusu