|
2017-01-29 22:27
조회: 996
추천: 0
div & table 3*3 마우스오버 틀<div data-inven-id="main" style="display:block;"><table><tbody><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"></div></td></tr></tbody></table></div><div data-inven-id="t1" style="display:none;"><table><tbody><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-out-css="{'t1':{'display':'none'},'main':{'display':'block'}}"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td colspan="2" rowspan="2"><div style="width:310px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td></tr></tbody></table></div><div data-inven-id="t2" style="display:none;"><table><tbody><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-out-css="{'t2':{'display':'none'},'main':{'display':'block'}}"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td colspan="3" rowspan="2"><div style="width:470px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr></tr></tbody></table></div><div data-inven-id="t3" style="display:none;"><table><tbody><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-out-css="{'t3':{'display':'none'},'main':{'display':'block'}}"></div></td></tr><tr><td colspan="2" rowspan="2"><div style="width:310px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr></tbody></table></div><div data-inven-id="t4" style="display:none;"><table><tbody><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td colspan="2" rowspan="3"><div style="width:310px; height:470px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-out-css="{'t4':{'display':'none'},'main':{'display':'block'}}"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td></tr></tbody></table></div><div data-inven-id="t5" style="display:none;"><table><tbody><tr><td colspan="2"><div style="width:310px; height:150px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td><td rowspan="2"><div style="width:150px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr><td rowspan="2"><div style="width:150px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-out-css="{'t5':{'display':'none'},'main':{'display':'block'}}"></div></td></tr><tr><td colspan="2"><div style="width:310px; height:150px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr></tbody></table></div><div data-inven-id="t6" style="display:none;"><table><tbody><tr><td colspan="2" rowspan="3"><div style="width:310px; height:470px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-out-css="{'t6':{'display':'none'},'main':{'display':'block'}}"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr></tbody></table></div><div data-inven-id="t7" style="display:none;"><table><tbody><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td colspan="2" rowspan="2"><div style="width:310px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;" data-inven-out-css="{'t7':{'display':'none'},'main':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr></tbody></table></div><div data-inven-id="t8" style="display:none;"><table><tbody><tr><td colspan="3" rowspan="2"><div style="width:470px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td></tr><tr></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;" data-inven-out-css="{'t8':{'display':'none'},'main':{'display':'block'}}"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr></tbody></table></div><div data-inven-id="t9" style="display:none;"><table><tbody><tr><td colspan="2" rowspan="2"><div style="width:310px; height:310px; padding:2px; margin:0px; border:1px solid #000; background-color:#999;"></div></td><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td><div style="width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #f0f; background-color:#eee;"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #ff0; background-color:#ddd;"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:2px; margin:0px; border:1px solid #0ff; background-color:#ccc;" data-inven-out-css="{'t9':{'display':'none'},'main':{'display':'block'}}"></div></td></tr></tbody></table></div> |
