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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -