Question

我想将一个类valError应用于td元素和两个输入文本框。

示例代码位于以下网址：demo for this question。我使用了以下代码，但当将鼠标悬停在td或任何输入文本框上时，它不会执行任何操作。我已经为td和输入文本框将类设置为valError，但它仍然没有帮助。

问题：当我将鼠标悬停在valError元素或任何文本框上时，如何确保应用课程td？我想使用没有JavaScript或jQuery的纯CSS来做到这一点。

Html代码

<style>
   .valError input[type='text']:hover {
   border: 2px solid red !important;
   background-color: lightyellow !important;
   color: red !important;
   }
   .valError td:hover {
   border: 2px solid red !important;
   background-color: lightyellow !important;
   color: red !important;
   }
</style>
<table>
   <tr>
      <td class='valError'>
         <!--some content here-->
         Hello I am a td element
      </td>
      <td>
         <table>
            <tr>
               <td>
                  First Name 
               </td>
               <td>
                  <input type='text' id='firstname' class='valError'>  
               </td>
            </tr>
            <tr>
               <td>
                  Last Name 
               </td>
               <td>
                  <input type='text' id='lastname' class='valError'>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Answer 1

删除类和标记之间的空格。

<style>
    input[type='text'].valError:hover {
       border: 2px solid red !important;
       background-color: lightyellow !important;
       color: red !important;
   }
   td.valError:hover {
       border: 2px solid red !important;
       background-color: lightyellow !important;
       color: red !important;
   }
</style>

使用CSS将一个类悬停在文本框和td元素上

1 个答案: