Overflow only

Question

I am trying to apply a hover style only on overflow. For instance:

.email{
    overflow:hidden;
 }

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

Is there any way to achieve what I want?

Thanks for answering.

Edit: I added jsfiddle to http://jsfiddle.net/mQA4L/ to demonstrate what I want to do.

Answer 1

You cannot do this with pure CSS, you will have to use javascript and check if your email lasts.

EDIT:

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

here is a working example, hope i understood correctly http://jsfiddle.net/mQA4L/25/