0

http://screencast.com/t/2KncBbiroMz

上記のリンクは、私が抱えている問題をより正確に示しています。ホバーは機能しますが、LI 要素にゆっくりとホバーすると、リンクにホバーすると表示されるリンクが消えます。

ここに私のHTMLがあります：

<div class="stats">
    <div class="container">
        <div class="row">
            <div class="span16">
                <ul class="user-stats">
                    <li id="class-points">
                        <span class="stats-content-container">
                            <span class="class-name"><%= class_room_name %></span><br />
                            <span class="large-headline"><%= total_game_points %></span> <span class="smaller-desc">points</span>
                        </span>
                        <a class="edit-class-name" href="#edit-class-name-modal" data-toggle="modal">edit name</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

JavaScript:

​$(function(){
   $('ul.user-stats li#class-points').mouseenter(function() {
      $('a.edit-class-name', this).stop(true, true).show();
    }).mouseleave(function() {
      $('a.edit-class-name', this).stop(true, true).hide();
    }); 
});​​​

純粋な CSS ソリューションでこれを試してみましたが、まだ同じ問題が発生しています。

4

2 に答える 2

1

stats-content-container問題は、との間にギャップがあるように思われるedit-class-nameため、マウスは実際class-pointsに にホバリングする前にいくつかのポイントで離れedit-class-nameます。

たぶん、そのセクション全体を包含する親要素にマウスリーブを置いてみることができます (<ul class="user-stats">実際の html/css を見ずに言うのは難しいかもしれません)。

于 2012-12-17T17:41:12.797 に答える
1

編集リンクは完全に配置されていますか? その場合、li とアンカーの間に 1 ピクセルのギャップがある可能性があります。確かにhtmlを見る必要があります。

于 2012-12-17T17:42:05.063 に答える