Question

Ok. I have for css

.rel{
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    -o-text-overflow: ellipsis;  
        -ms-text-overflow: ellipsis;  
    -moz-binding: url('ff.xml#rel');  
    width: 460px;
    line-height: 15px;
        border-top:dotted 1px #dfdfdf;
}  
 .rel:hover{

overflow:inherit;
white-space: inherit;

    }
.rel:hover .rel_source{
    display: none;
    }

my html is

<div >
                                                <div  class="rel">
                                                <a href="http://feedproxy.google.com/~r/HeraldSunNationalNews/~3/N89EJIdwe9E/story-e6frf7l6-1226207160923">Julia Gillard's anti-wrinkle anti- sadsad anti-wrinkle poasdsadasdasdasasdsd</a>
                                                <div class="rel_source" style="line-height:15px">  Herald Sun | <span class="cat_red">1d 9h ago<span></span> </div> 
                                                </div>
                                                <div  class="rel">
                                                <a href="http://feedproxy.google.com/~r/HeraldSunNationalNews/~3/N89EJIdwe9E/story-e6frf7l6-1226207160923">Julia Gillard's anti-wrinkle poasdsadasdasdas anti-wrinkle poasdsadasdasdas asdasd asdsadsad anti-wrinkle poasdsadasdasdasasdsd asds...</a>
                                                <div class="rel_source" style="line-height:15px">  Herald Sun | <span class="cat_red">1d 9h ago<span></span> </div> 
                                                </div>
                                                <div  class="rel">
                                                <a href="http://feedproxy.google.com/~r/HeraldSunNationalNews/~3/N89EJIdwe9E/story-e6frf7l6-1226207160923">Julia Gillard's anti-wrinkle poasdsadasdasdas anti-wrinkle poasdsadasdasdas asdasd asdsadsad anti-wrinkle poasdsadasdasdasasdsd asds...</a>
                                                <div class="rel_source" style="line-height:15px">  Herald Sun | <span class="cat_red">1d 9h ago<span></span> </div> 
                                                </div>                                                                                                          
                                    </div>

So what im doing is, i am hiding the rel_source to show the overflowed text(rel).
What i dont want is to hide the rel_source if .rel is not overflow.
Any solution???

Answer 1

$(document).on("mouseover", ".rel ", function(){ 

if ($('a',this).text().length< 90)
{ // error here?
    $(this).addClass("rel_shorty");
   $(this).removeClass("rel")
   }

 });

css

 .rel_shorty{
        width: 470px;
    line-height: 15px;
        border-bottom:dotted 1px #dfdfdf;
    }