1

これは私のhtmlテーブルコードです:

<table border='1px'>
<tr>
 <td id='td'>first</td>
 <td>last</td>
<tr>
 <td id='td'>newFirst</td>
 <td>newSecond</td>
</table>

これが私の1つのdivです。

<div class="Not_Editable id-left" >Not Editable</div>

テーブルtrにカーソルを合わせて最初にtdし、次にこのdivを表示したいときに、このdivを作成します。2番目のtdにカーソルを合わせてから表示しないでください。

これは、タイトル ラベルとして div を作成するための css です。

<style>
.Not_Editable {
  position: relative;
  background-color: #292929;

  width: 100px;
  height: 30px;
  line-height: 30px; /* vertically center */

  color: white;
  text-align: center;
  border-radius: 10px;

  font-family: sans-serif;
}
.Not_Editable:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
}
.id-left:after {
  border-right-color: #292929;

  top: 50%;
  right: 95%;
  margin-top: -15px;    
}
</style>

jsfiddle http://jsfiddle.net/9VPPv/

どうすればこれを行うことができますか。これで私を助けてください。

4

5 に答える 5

0

おそらく問題は、td要素に一意の ID がなく、これが有効でないことです。

私の推測では、複数の結果が得られることを期待して ID でセレクターを実行していると思います。ID ベースのセレクターは、0 または 1 つの要素を返します。

これをより明確にするために、このようなものがある場合

$('#td').hover(function(){...}, function(){...});

イベント ハンドラーは、セレクターに一致する最初の td にのみ適用されます。

さらに悪いことに、テーブルの html が正しくありません。あなたはこのようなものを持っている必要があります

<table border='1px'>
<tr>
 <td class='td'>first</td>
 <td>last</td>
</tr>
<tr>
 <td class='td'>newFirst</td>
 <td>newSecond</td>
</tr>
</table>

そして、jsロジックを次のように変更できます

$('table .td').hover(function(){...}, function(){...});
于 2013-07-25T11:52:01.667 に答える
0

これらの行に沿った何かが機能します:

最初に、特定のロールオーバーを持つ必要があることを定義します

<table border='1px'>
<tr>
 <td class="td not-editable">first</td>
 <td>last</td>
<tr>
 <td class="td">newFirst</td>
 <td>newSecond</td>
</table>

(一意でない場合は、id の代わりにクラスを使用する必要があります)

次に、ユーザーが要素をロールオーバーすると、div を td に挿入します (そして、マウスアウトで削除します)。

var el = $('<div class="Not_Editable id-left" >Not Editable</div>');

$('td.not-editable').on('mouseover', function(e) {
    var b = e.target.append('el');
    e.target.on('mouseout', function(e) {
        b.remove();
    });
});

私はこのコードをデバッグしていませんが、JS 実装を使用する場合は、これが確実に前進する方法です。

于 2013-07-25T11:55:48.970 に答える
0

ワーキングデモhttp://jsfiddle.net/cse_tushar/G6Cwe/4/

HTML

<div class="Not_Editable id-left"><div class="triangle"></div>Not Editable</div>
<table border='1px'>
    <tr>
        <td class='td tr'>first</td>
        <td>last</td>
    </tr>
    <tr>
        <td class='td tr'>newFirst</td>
        <td>newSecond</td>
    </tr>
</table>

CSS

.Not_Editable {
    display:none;
    position:absolute;
    background-color: #292929;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    border-radius: 10px;
    font-family: sans-serif;
}
.triangle {
    display:none;
    position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right:15px solid #292929;
    margin-left:-10px;
}

js

$('table tr td:first-child').mousemove(function (e) {
    $('.Not_Editable').css('top', (e.clientY + 10) + 'px').css('left', (e.clientX + 10) + 'px').show();
    $('.triangle').show();
}).mouseout(function () {
    $('.Not_Editable').hide();
    $('.triangle').hide();
});
于 2013-07-25T11:55:57.723 に答える
0

このようなもの？

$('#td1').hover(function(){
$('.Not_Editable').show();
},function(){
$('.Not_Editable').hide();
});

html を修正し、id を td から td1 & td2 に変更し、<tr>

デモ

于 2013-07-25T11:56:03.397 に答える
0

さらに良い; 純粋な CSS ソリューション

html

<table border='1px'>
    <tr>
             <td class="td not-editable">first<div class="Not_Editable id-left" >Not Editable</div></td>
             <td>last</td>
        </tr>
        <tr>
             <td class="td">newFirst</td>
             <td>newSecond</td>
         </tr>
    </table>

そしてCSS

td.not-editable > .Not_Editable {
    display: none;
}

td.not-editable:hover > .Not_Editable {
    display: block;
}
于 2013-07-25T11:59:16.393 に答える