在Qualtrics中，如何阻止背景懸停顏色從描述性區域流向項目區域？

Question

首先，我想對這個問題中的措詞是否尷尬表示歉意，因為我不確定該如何清楚地寫出來。 簡而言之，我想做兩件事：

• 將帶有表格的工具提示編程到Qualtrics的問題區域（已完成）
• 當一個人徘徊時，讓每行的背景變色。

現在，我已經“完成”了最后一部分，但是背景色滲入了項目響應區域，我無法告知如何停止它。 我一直在絞盡腦汁，我假設這是我所忽略的簡單事情。 我一直在使用的代碼包含在下面。 任何幫助將不勝感激。 謝謝！

Javascript（在外觀下的標題中）：

.myExpandItem
{
text-decoration: underline;
position: relative;
}

.myExpandItem:hover .myExpandBox {
display: block;
}

.myExpandBox
{
position: absolute;
background: white;
opacity: 1;
border: 10px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
min-height: 200px;
min-width: 450px;
display: none;
left: 300px;
top: -375px;
padding: 10px;
color: black;
font-size: 12.000000pt; 
font-family: 'Arial';
}

這是正文中的關聯HTML代碼：

<span style="font-size:16px;"><span style="font-
family:arial,helvetica,sans-serif;">To remind yourself of the 
description for each area, hover over the link named BLAH below.
</span></span>&nbsp;<div><br>

<span class="myExpandItem"><div align="right">BLAH</div><span 
class="myExpandBox">

<style type="text/css">

table {
overflow: hidden;
border-collapse: collapse;
}

td, th {
padding: 10px;
position: relative;
outline: 3;
}

tbody tr:hover {
background-color: lightblue;
}

</style>


<table style="background: white;border-radius:15px;-moz-border-
radius:15px;-webkit-border-radius:15px;">

<thead>
  <tr>
    <th class="col"><h4>Area</h4></th>
    <th class="col"><h4>Description</h4></th>
  </tr>
</thead>
<thead>
    <tr>
         <td colspan="2"><hr></td>
    </tr>
</thead>
<tbody>
  <tr>
    <td>ITEM 1</td>
    <td>DEFINITION.
</td>
  </tr>

  <tr>
    <td>ITEM 2</td>
    <td>DEFINITION.
 </td>
  </tr>

  <tr>
    <td>ITEM 3</td>
    <td>DEFINITION.</td>
  </tr>
 </tbody><tbody>

 </tbody></table>

 </span> 
 </span>

如您所見，當將鼠標懸停在項目響應區域上時，淡藍色的“出血”會消失。 再次感謝您的幫助。 我很感激。

Answer 1

我修改了標記，現在可以使用了。 再次，毫無疑問，這是一種更為優雅的方式，因此，任何評論都將不勝感激。 無論如何，我希望這對其他人有幫助。

<span class="myExpandItem"><div align="right">BLAH</div><span 
class="myExpandBox">

<style style="text/css">

.hoverTable{
    width:100%; 
    border-collapse:collapse; 
}

 .hoverTable td{ 
      padding:7px;
 }

 .hoverTable tr{
      background: white;
 }

 .hoverTable tr:hover {
      background-color: lightblue;
 }

.hoverTable tr:first-child:hover {
      background-color: white;
 }

.hoverTable td:first-child:hover {
      background-color: white;
 }


table#t01 {
      overflow: hidden;
      border-collapse: collapse;
      background-color: white;
      border-radius:15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
}

</style>


<table id="t01"; class = "hoverTable">

    <tr:first-child>
        <th class="col"><h4>Area</h4></th>
        <th class="col"><h4>Description</h4></th>
    </tr>

    <td:first-child>
         <td colspan="2"><hr></td>
    </tr>

    <tr>
        <td>ITEM 1</td>
        <td>DEFINITION.</td>
    </tr>

    <tr>
        <td>ITEM 2</td>
        <td>DEFINITION.</td>
    </tr>

    <tr>
        <td>ITEM 3</td>
        <td>DEFINITION.</td>
    </tr>

</table>

</span> 
</span>