1

メニューに簡単なツールチップを追加したいと考えています。ツールチップのテキストのピクセル数を計算するにはどうすればよいですか?

HTML:

<nav>
    <ul>
        <li>
            <a href="#" title="Item 1 text">Item 1</a>
        </li>
        <li>
            <a href="#" title="Item 2  longer text" >Item 2</a>
        </li>
        <li>
            <a href="#" title="Item 3 text text text">Item 3</a>
        </li>
    </ul>
</nav>

CSS:

nav{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background: grey;
}
ul{
    width: 300px;
    margin:0 auto;
}
li{
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 50%;
    bottom: 30px;
    background:black;
    border: solid 1px grey;
    border-bottom:none;
    display:none;
    color:white;
}
li:hover span{
    display:block;
}
a{
    display:block;
    text-decoration:none;
    color: white;
    line-height: 30px;
    padding: 0 10px;

}​

jQuery: 

$(document).ready(function(){
    $('nav li').each(function(){
        $(this).append('<span>'+$(this).find('a').attr('title')+'</span>');
    });
    $('nav li span').each(function(){
        // var textwidth = ???? 
        // $('nav li span').css("left",-textwidth/2);
        // $('nav li span').css("width",textwidth);
    });
});

デモ:
http://jsfiddle.net/vxUTZ/1/ </p>

4

2 に答える 2

3 
$(this).width();

上記のコードを使用すると、スパンの幅を取得できますが、css-part でスパン内の空白の動作を変更する必要がある前に:

span { white-space: nowrap; }

これにより、すべての空白の後に改行がなくなり、計算された幅がテキストの幅になります

于 2012-09-10T14:00:50.920 に答える
0

使用する

$(this).width();

または使用することもできます

$(this).attr("width");

関数内で、テキストの長さを調整したい場合

$(this).text().length;
于 2012-09-10T12:59:58.763 に答える