jquery - how to apply div on hover my table td -
this html table code:
<table border='1px'> <tr> <td id='td'>first</td> <td>last</td> <tr> <td id='td'>newfirst</td> <td>newsecond</td> </table>
and here 1 div this.
<div class="not_editable id-left" >not editable</div>
i create div when hover on table tr first td want show on them div. , hover on second td dont show.
here css create div title label.
<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/
now how can this. me out this.
working demo 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(); });
Comments
Post a Comment