Проблема зависания над тд с размахом строк - PullRequest
Новая
       19

Проблема зависания над тд с размахом строк

0 голосов
/ 25 сентября 2018

У меня возникают некоторые проблемы, когда я пытаюсь навести курсор на тд с помощью rowspan.Я не мог найти решение.Я видел на некоторых форумах, что мне может понадобиться JS / jQuery ... Может кто-нибудь дать мне решение?Я покажу вам свой код ... Мне просто нужно что-то запустить, и я смогу его обработать после .... 

<table>
    <tr>
      <th></th>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>

    <tr>
      <td>7:00</td>
      <td rowspan="8" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 07:00 - 11:00 </span></br> Dr. Max Turner</p>
      </td>
      <td style="background-color:rgb(242,243,248);"></td>
      <td rowspan="5" style="background-color:rgb(0,182,255)">
        <p class="tt-table-p">Neurology</br> <span class="tt-table-r"> Room 11 </span>  </br></br> <span class="tt-table-hours"> 07:00 - 9:00 </span></br> Dr. Jason Clark</p>
      </td>
      <td rowspan="10" style="background-color:rgb(222,184,135)">
        <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </span>  </br></br> <span class="tt-table-hours"> 07:00 - 12:00 </span></br> Dr. Amy Adams</p>
      </td>
      <td style="background-color:rgb(242,243,248);"></td>
      <td rowspan="7" style="background-color:rgb(199,115,191)">
        <p class="tt-table-p">Traumatology</br> <span class="tt-table-r">  Room 32 </span>  </br></br> <span class="tt-table-hours"> 07:00 - 10:30 </span></br> Dr. Peter Wilson</p>
      </td>
      <td rowspan="7" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r">  Room 16 </span>  </br></br> <span class="tt-table-hours"> 07:00 - 10:30 </span></br> Dr. Max Turner</p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="3" style="background-color:rgb(0,182,255)">
        <p class="tt-table-p">Neurology</br> <span class="tt-table-r">  Room 11 </span>  </br></br> <span class="tt-table-hours"> 07:30 - 9:00 </span></br> Dr. Jason Clark</p>
      </td>
      <td rowspan="4" style="background-color:rgb(0,182,255)">
        <p class="tt-table-p">Dentistry</br> <span class="tt-table-r">  Room 11 </span>  </br></br> <span class="tt-table-hours"> 07:00 - 9:00 </span></br> Dr. Jason Clark</p>
      </td>
    </tr>

    <tr>
      <td>8:00</td>
    </tr>

    <tr>
      <td></td>
    </tr>

    <tr>
      <td>9:00</td>
      <td rowspan="3" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r">  Room 16 </span>  </br></br> <span class="tt-table-hours"> 09:00 - 10:30 </span></br></br> <span class="tt-table-dr"> Dr. Max Turner</p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td></td>
      <td rowspan="7" style="background-color:rgb(255,104,90)">
          <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 09:30 - 13:00 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson</p>
      </td>
    </tr>

    <tr>
      <td>10:00</td>
      <td rowspan="5" style="background-color:rgb(199,115,191)">
        <p class="tt-table-p">Traumatology</br> <span class="tt-table-r">  Room 32 </span>  </br></br> <span class="tt-table-hours"> 10:00 - 12:30 </span></br></br> <span class="tt-table-dr">  Dr. Peter Wilson</p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="3" style="background-color:rgb(255,104,90)">
        <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 10:30 - 12:00 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson</p>
      </td>
      <td rowspan="6" style="background-color:rgb(76,76,191)">
        <p class="tt-table-p">Diagnostics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 10:30 - 13:30 </span></br></br> <span class="tt-table-dr">  Dr. Helen Wilson</p>
      </td>
      <td rowspan="4" style="background-color:rgb(199,115,191)">
        <p class="tt-table-p">Traumatology</br> <span class="tt-table-r">  Room 32 </span>  </br></br> <span class="tt-table-hours"> 10:30 - 12:30 </span></br></br> <span class="tt-table-dr">  Dr. Peter Wilson</p>
      </td>
    </tr>

    <tr>
      <td>11:00</td>
      <td rowspan="4" style="background-color:rgb(0,182,255)">
        <p class="tt-table-p">Dentistry</br> <span class="tt-table-r">  Room 11 </span>  </br></br> <span class="tt-table-hours"> 11:00 - 13:00 </span></br></br> <span class="tt-table-dr">  Dr. Jason Clark</p>
      </td>
    </tr>

    <tr>
      <td></td>
    </tr>

    <tr>
      <td>12:00</td>
      <td rowspan="4" style="background-color:rgb(0,106,121)">
        <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </span>  </br></br> <span class="tt-table-hours"> 12:00 - 14:00 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
      </td>
      <td rowspan="4" style="background-color:rgb(0,106,121)">
        <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </span>  </br></br> <span class="tt-table-hours"> 12:00 - 14:00 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="5" style="background-color:rgb(255,104,90)">
        <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson </span></p>
      </td>
      <td rowspan="5" style="background-color:rgb(222,184,135)">
        <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </span>  </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
      </td>
    </tr>

    <tr>
      <td>13:00</td>
      <td rowspan="4" style="background-color:rgb(222,184,135)">
        <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </span>  </br></br> <span class="tt-table-hours"> 13:00 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
      </td>
      <td rowspan="5" style="background-color:rgb(199,115,191)">
        <p class="tt-table-p">Traumatology</br> <span class="tt-table-r">  Room 32 </span>  </br></br> <span class="tt-table-hours"> 13:00 - 15:30 </span></br></br> <span class="tt-table-dr">  Dr. Peter Wilson </span></p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="5" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r">  Room 16 </span>  </br></br> <span class="tt-table-hours"> 13:30 - 16:00 </span></br></br> <span class="tt-table-dr">  Dr. Max Turner </span></p>
      </td>
    </tr>

    <tr>
      <td>14:00</td>
      <td></td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="6" style="background-color:rgb(199,115,191)">
        <p class="tt-table-p">Traumatology</br> <span class="tt-table-r">  Room 32 </span>  </br></br> <span class="tt-table-hours"> 14:30 - 17:30 </span></br></br> <span class="tt-table-dr">  Dr. Peter Wilson </span></p>
      </td>
      <td rowspan="5" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r">  Room 16 </span>  </br></br> <span class="tt-table-hours"> 14:30 - 17:00 </span></br></br> <span class="tt-table-dr">  Dr. Max Turner </span></p>
      </td>
    </tr>

    <tr>
      <td>15:00</td>
      <td rowspan="5" style="background-color:rgb(0,187,109)">
        <p class="tt-table-p">Cardiology</br> <span class="tt-table-r">  Room 16 </span>  </br></br> <span class="tt-table-hours"> 15:00 - 17:30 </span></br></br> <span class="tt-table-dr">  Dr. Max Turner </span></p>
      </td>
      <td rowspan="5" style="background-color:rgb(0,106,121)">
        <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </span>  </br></br> <span class="tt-table-hours"> 15:00 - 17:30 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
      </td>
      <td rowspan="4" style="background-color:rgb(0,106,121)">
        <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </span>  </br></br> <span class="tt-table-hours"> 15:00 - 17:00 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="4" style="background-color:rgb(255,104,90)">
        <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 15:30 - 17:30 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson </span></p>
      </td>
    </tr>

    <tr>
      <td>16:00</td>
      <td rowspan="7" style="background-color:rgb(255,104,90)">
        <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </span>  </br></br> <span class="tt-table-hours"> 16:30 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson </span></p>
      </td>
    </tr>

    <tr>
      <td></td>
    </tr>

    <tr>
      <td>17:00</td>
      <td rowspan="5" style="background-color:rgb(76,76,191)">
        <p class="tt-table-p">Diagnostics</br> <span class="tt-table-r">  Room 15 </br></br> <span class="tt-table-hours"> 17:00 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Helen Wilson </span></p>
      </td>
      <td rowspan="5" style="background-color:rgb(76,76,191)">
        <p class="tt-table-p">Diagnostics</br> <span class="tt-table-r">  Room 15 </br></br> <span class="tt-table-hours"> 10:30 - 13:30 </span></br></br> <span class="tt-table-dr">  Dr. Helen Wilson </span></p>
      </td>
    </tr>

    <tr>
      <td></td>
      <td rowspan="4" style="background-color:rgb(255,104,90)">
        <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson </span></p>
      </td>
      <td rowspan="4" style="background-color:rgb(0,106,121)">
        <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
      </td>
      <td rowspan="4" style="background-color:rgb(222,184,135)">
        <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
      </td>
      <td rowspan="4" style="background-color:rgb(222,184,135)">
        <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
      </td>
    </tr>

    <tr>
      <td>18:00</td>
    </tr>

    <tr>
      <td></td>
    </tr>

    <tr>
      <td>19:00</td>
    </tr>
  </table>
</div>

</body>



.tt-table-container table tr th {
    font-weight: normal;
    font-size:14px;
    width:60px;
    height:60px;
    text-align:center;
}

.tt-table-container table {
    width:100%;
    margin-top:30px;
}

.tt-table-container table tr td {
    height:60px;

}

.tt-table-container table tr td {
    width:12.5%;
        font-size:15.5px;

}

.tt-table-container table tr td[rowspan]{
    vertical-align: top;
    padding-top:20px;
    font-size:13.5px;
}

.tt-table-container table tr:nth-child(2n) td:first-of-type {
    background-color:rgb(242,243,248);
    font-size:14px;
}

.tt-table-p {
    color:rgba(255,255,255,0.9);
    letter-spacing: 1px;
}

.tt-table-r {
    font-size:14px;
}

.tt-table-hours {
    font-size:13.5px;
    color:rgba(255,255,255,0.5);
}

.tt-table-dr {
    font-size:13.5px;
}

.tt-green:hover {
    background-color:red;
}

, и я пытаюсь воспроизвести эту таблицу с эффектом наведения:

https://www.templatemonster.com/demo/69211.html после открытия шаблона перейдите в меню «Отделы».

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете использовать указатель мыши в функции JavaScript, чтобы попытаться решить эту проблему.Вы изменяете цвет td (или делаете все, что хотите) в «onmouseover» и снова изменяете его в «onmouseout».

см. мой код:

** HTML:**

<tr>
          <td></td>
          <td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(255,104,90)">
            <p class="tt-table-p">Pediatrics</br> <span class="tt-table-r">  Room 15 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Julia Jameson </span></p>
          </td>
          <td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(0,106,121)">
            <p class="tt-table-p">Pulmonary</br> <span class="tt-table-r">  Room 113 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr">  Dr. Rodney Stratton </span></p>
          </td>
          <td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(222,184,135)">
            <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
          </td>
          <td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(222,184,135)">
            <p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r">  Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr">  Dr. Amy Adams </span></p>
          </td>
        </tr>

JavaScript: 

function changeColorRed(x) {
    var temp = x.style.backgroundColor;
    localStorage.setItem("color", temp); // store the last backgroundColor
    x.style.backgroundColor = "red";
}

function normalColor(x) {
    var lastColor = localStorage.getItem('color'); // find the last backgroundColor
    x.style.backgroundColor = lastColor;
}
...