如何在悬停我的桌子上应用 div td

Question

这是我的 html 表格代码：

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

这是我的一个 div。

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

当我将鼠标悬停在我的桌子上时，我只是创建了这个 div，首先 td 然后想在他们身上显示这个 div。 并悬停在第二个 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/

现在我该怎么做。帮我解决这个问题。

Answer 1

工作演示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();
});

Answer 2

类似的方法会起作用：

首先，定义一个它应该有特定的翻转

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

（p.s. 如果它不是唯一的，你应该使用 class 而不是 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 实现，这绝对是前进的方向

Answer 3

这样的？

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

修复了 html，将 id 从 td 更改为 td1 & td2 并关闭了<tr>

Demo

Answer 4

问题可能是您的 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(){...});

Answer 5

更好；纯 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;
}