Вопрос - как сделать чтобы подсказки были сверху закрашенных ячеек имеющих объём и тень.
|
konart,
убрать позиционирование везде и добавить это. td{ position: relative; } td:after { position: absolute; } |
Вложений: 1
проблема осталась
|
я использовал вместо absolute - fixed именно с целью увести подсказку от закрашенных ячеек
|
konart,
делайте свой пример, ниже смотреть DarkGreen <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; } #myTBL td.Red { font:14px helvetica, arial, sans-serif; color : #ccc; font-weight:800; background-color:Red; } #myTBL td.Orange { font:14px helvetica, arial, sans-serif; color : #666; font-weight:800; background-color:Orange; } td{ height: 70px; position: relative; } #myTBL td:hover:after { background-color: #D2691E; border-radius: 6px; padding: 8px; opacity: 1; } td.DarkGreen:after{ opacity:0; content: "это DarkGreen"; position: absolute; left: 70px; } td.Red:after{ opacity:0; content: "это Red"; position: absolute; left: 70px; } td.Orange:after{ opacity:0; content: "это Orange"; position: absolute; left: 70px; } #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } td{ position: relative; } td:after { position: absolute; } #myTBL td:hover:after { background-color: Lime; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Black; font-weight:400; border-radius: 1px; padding: 2px;/*8*/ opacity: 0.99;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); z-index: 10; } td.DarkGreen:after{ opacity:0; content: "ALLIN"; right: 50px; bottom: 30px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Red" name="COLOR" value="" > <label for="Red">RED</label> <input type="radio" id="Orange" name="COLOR" value=""> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> </html> |
мой пример. Для правильного понимания ситуации - уменьшите размер окна браузера до минимально возможного размера!!!
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } #myTBL td.Red { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:Indigo; background: linear-gradient(180deg, Indigo 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } #myTBL td.Orange { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : #000000; /*#ccc #666 #000 White*/ font-weight:700; background-color:YellowGreen; background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } td{ height: 70px; position: relative; } #myTBL td:hover:after { background-color: #D2691E; border-radius: 6px; padding: 8px; opacity: 1; } td.DarkGreen:after{ opacity:0; content: "это DarkGreen"; position: absolute; left: 70px; } td.Red:after{ opacity:0; content: "это Red"; position: absolute; left: 70px; } td.Orange:after{ opacity:0; content: "это Orange"; position: absolute; left: 70px; } #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } td{ position: relative; } td:after { position: absolute; } #myTBL td:hover:after { background-color: Lime; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Black; font-weight:400; border-radius: 1px; padding: 2px;/*8*/ opacity: 0.99;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); z-index: 10; } td.DarkGreen:after{ opacity:0; content: "ALLIN"; right: 50px; bottom: 30px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Red" name="COLOR" value="" > <label for="Red">RED</label> <input type="radio" id="Orange" name="COLOR" value=""> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> </html> |
пока подсказка лежит в области одной ячейки (окно браузера позволяет) всё нормально, но как только (а мне нужен минимальный размер окна) и подсказки больше чем ячейка - то подсказка начинает прятаться под ячейку....
|
konart,
td.DarkGreen:after{ width: 50px; opacity:0; content: "ALLIN"; left:0; bottom: 30px; } |
похоже заработало! РОНИ - спасибо!!! Правда подсказка прячется за верхний и правый край. Хорошо бы сделать чтобы она появлялась на свободном месте, но это видимо простыми привязками типа left:0;
bottom: 30px; не решить? |
konart,
... плагинов подсказок очень много в инете |
Часовой пояс GMT +3, время: 18:07. |