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当我将鼠标悬停在我的桌子上时，然后想要向他们展示这个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

问题可能是您的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 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>

（如果它不是唯一的，你应该使用class而不是id）

其次，一旦用户掷出元素（并在mouseout上删除它），就将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

工作演示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 4

这样的东西？

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

修正了html，将id从td更改为td1＆amp; td2并关闭<tr>

Demo

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;
}

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

5 个答案: