删除表格背景悬停 - HTML / CSS
我正在制作联系表单：http://americanbitcoinacademy.com/contact-us/
当您尝试将字段逐个或整个表格悬停在字段上时，它会将背景颜色设置为深灰色。
如何删除它，只是有一个纯白色的背景而没有悬停在它上面？
<style type="text/css">
.beta-base .preheader, .beta-base .header, .beta-base .sidebar, .beta-base .body, .beta-base .footer, #mainContent {
text-align: left;
}
.beta-base .preheader, .beta-base .header, .beta-base .body, .beta-base .sidebar, .beta-base .leftSidebar, .beta-base .rightSidebar, .beta-base .footer {
margin: 0;
padding: 0;
border: none;
white-space: normal;
line-height: normal;
}
.beta-base .title, .beta-base .subtitle, .beta-base .text, .beta-base img {
margin: 0;
padding: 0;
background: none;
border: none;
white-space: normal;
line-height: normal;
}
.beta-base .bodyContainer td.preheader{
padding: 10px 0;
}
.beta-base .bodyContainer td.header {
padding: 0;
height: 30px;
}
.beta-base .bodyContainer td.body, .beta-base .bodyContainer td.footer,
.beta-base .bodyContainer td.sidebar, .beta-base .bodyContainer td.leftSidebar, .beta-base .bodyContainer td.rightSidebar {
padding: 20px;
}
.beta-base .bodyContainer td.header p, .beta-base .bodyContainer td.preheader p, .beta-base .bodyContainer td.body p,
.beta-base .bodyContainer td.footer p, .beta-base .bodyContainer td.sidebar p,
.beta-base .bodyContainer td.leftSidebar p, .beta-base .bodyContainer td.rightSidebar p {
margin: 0;
color: inherit;
}
.beta-base .bodyContainer td.header div.title, .beta-base .bodyContainer td.preheader div.title, .beta-base .bodyContainer td.body div.title,
.beta-base .bodyContainer td.footer div.title, .beta-base .bodyContainer td.sidebar div.title,
.beta-base .bodyContainer td.leftSidebar div.title, .beta-base .bodyContainer td.rightSidebar div.title,
.beta-base .bodyContainer td.header div.subtitle, .beta-base .bodyContainer td.preheader div.subtitle, .beta-base .bodyContainer td.body div.subtitle,
.beta-base .bodyContainer td.footer div.subtitle, .beta-base .bodyContainer td.sidebar div.subtitle,
.beta-base .bodyContainer td.leftSidebar div.subtitle, .beta-base .bodyContainer td.rightSidebar div.subtitle,
.beta-base .bodyContainer td.header div.text, .beta-base .bodyContainer td.preheader div.text, .beta-base .bodyContainer td.body div.text, .beta-base .bodyContainer td.body div.text div,
.beta-base .bodyContainer td.footer div.text, .beta-base .bodyContainer td.sidebar div.text,
.beta-base .bodyContainer td.leftSidebar div.text, .beta-base .bodyContainer td.rightSidebar div.text {
overflow: auto;
}
.beta-base .optout {
margin-bottom: 10px;
margin-top: 10px;
}
div.infusion-captcha {
width: 220px;
padding: 10px;
}
div.infusion-captcha input, div.infusion-captcha select, div.infusion-captcha textarea {
width: 95%;
display: inline-block;
vertical-align: middle;
}
table.infusion-field-container td.infusion-field-input-container input[type='text'],
table.infusion-field-container td.infusion-field-input-container input[type='password'],
table.infusion-field-container td.infusion-field-input-container textarea {
width: 98%; /* must be 98% to make the snippet-menu line up due to border width */
margin: 0;
}
table.infusion-field-container td.infusion-field-input-container select {
width: 101%;
*width: 102%; /* this one for IE */
margin: 0;
}
table.infusion-field-container td.infusion-field-label-container {
padding-right: 5px;
}
td.header .image-snippet img {
vertical-align: bottom;
}
#webformErrors {
color: #990000;
font-size: 14px;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.infusion-form {
margin: 0;
height: 100%;
}
.infusion-option {
display: block;
text-align: left;
}
</style>
<style type="text/css">
.beta-font-b h1, .beta-font-b h2, .beta-font-b h3, .beta-font-b h4, .beta-font-b h5, .beta-font-b h6 {
font-family: arial,sans-serif;
}
.beta-font-b h1 {font-size: 24px;}
.beta-font-b h2 {font-size: 20px;}
.beta-font-b h3 {font-size: 14px;}
.beta-font-b h4 {font-size: 12px;}
.beta-font-b h5 {font-size: 10px;}
.beta-font-b h6 {font-size: 8px;}
.beta-font-b address {font-style: italic;}
.beta-font-b pre {font-family: Courier New, monospace;}
.beta-font-b .title, .beta-font-b .title p {
font-size: 20px;
font-weight: bold;
font-family: arial,sans-serif;
}
.beta-font-b .subtitle, .beta-font-b .subtitle p {
font-size: 11px;
font-weight: normal;
font-family: arial,sans-serif;
}
.beta-font-b .text, .beta-font-b p {
font-size: 12px;
font-family: arial,sans-serif;
}
.beta-font-b .preheader .text, .beta-font-b .preheader .text p {
font-size: 11px;
font-family: arial,sans-serif;
}
.beta-font-b .footer a {
font-size: 11px;
font-family: arial,sans-serif;
}
.beta-font-b .footer .text {
font-size: 10px;
font-family: verdana,sans-serif;
}
.beta-font-b .sidebar .title, .beta-font-b .leftSidebar .title, .beta-font-b .rightSidebar .title {
font-size: 15px;
font-weight: bold;
font-family: arial,sans-serif;
}
.beta-font-b .sidebar .subtitle, .beta-font-b .leftSidebar .subtitle, .beta-font-b .rightSidebar .subtitle {
font-size: 12px;
font-family: arial, sans-serif;
}
.beta-font-b .sidebar .text, .beta-font-b .sidebar .text p, .beta-font-b .leftSidebar .text, .beta-font-b .rightSidebar .text {
font-size: 11px;
font-family: arial, sans-serif;
}
.infusion-field-label-container {
font-size: 14px;
font-family: arial,sans-serif;
}
.infusion-field-input-container {
color: #000000;
font-size: 12px;
}
.infusion-option label {
color: #000000;
font-size: 14px;
font-family: arial,sans-serif;
}
</style>
<style type="text/css">
.default .background{
background-color:#ffffff;
;
}
.default .title{
color:#000000;
;
}
.default .subtitle{
color:#000000;
;
}
.default .text{
color:#000000;
;
}
.default a{
color:#0645ad;
;
}
.default .background .preheader .text{
color:#1a242e;
;
}
.default .background .preheader a{
color:#0645ad;
;
}
.default .header{
background-color:#ffffff;
;
}
.default .header .title{
color:#000000;
;
}
.default .header .subtitle{
color:#000000;
;
}
.default .header .text{
color:#000000;
;
}
.default .header .a{
color:#157DB8;
;
}
.default .hero{
background-color:#025C8D;
;
}
.default .hero .title{
color:#FFFFFF;
;
}
.default .hero .subtitle{
color:#FFFFFF;
;
}
.default .hero .text{
color:#FFFFFF;
;
}
.default .hero .a{
color:#157DB8;
;
}
.default .quote{
background-color:#013B5A;
;
}
.default .quote:after{
border-color:#013B5A transparent transparent transparent;
;
}
.default .quote .title{
color:#FFFFFF;
;
}
.default .quote .subtitle{
color:#FFFFFF;
;
}
.default .quote .text{
color:#FFFFFF;
;
}
.default .quote .a{
color:#157DB8;
;
}
.default .body{
background-color:#ffffff;
;
}
.default .main{
background-color:#FFFFFF;
;
}
.default .main .title{
color:#000000;
;
}
.default .main .subtitle{
color:#000000;
;
}
.default .main .text{
color:#000000;
;
}
.default .main .a{
color:#157DB8;
;
}
.default .sidebar{
background-color:#ffffff;
;
}
.default .sidebar .title{
color:#000000;
;
}
.default .sidebar .subtitle{
color:#000000;
;
}
.default .sidebar .text{
color:#000000;
;
}
.default .sidebar .a{
color:#157DB8;
;
}
.default .leftSidebar{
background-color:#ffffff;
;
}
.default .leftSidebar .title{
color:#f15c25;
;
}
.default .leftSidebar .subtitle{
color:#669940;
;
}
.default .rightSidebar{
background-color:#ffffff;
;
}
.default .rightSidebar .title{
color:#f15c25;
;
}
.default .rightSidebar .subtitle{
color:#669940;
;
}
.default .footer{
background-color:#ffffff;
;
}
.default .footer .text{
color:#0d0d0d;
;
}
.default .footer .title{
color:#000000;
;
}
.default .footer a{
color:#1b3bde;
;
}
.default .footer .subtitle{
color:#000000;
;
}
.default .infusion-field-label-container{
font-size:14px;
;
}
.default .infusion-field-label-container{
font-family:Arial;
;
}
.default .infusion-field-label-container{
color:#000000;
;
}
.default .infusion-field-input{
font-size:14px;
;
}
.default .infusion-option label{
font-size:14px;
;
}
.default .infusion-option label{
font-family:Arial;
;
}
.default .infusion-option label{
color:#000000;
;
}
.default .webFormBodyContainer{
border-width:0px;
;
}
.default .webFormBodyContainer{
border-style:Hidden;
;
}
.default .webFormBodyContainer{
border-color:#000000;
;
}
</style>
<style type="text/css">
.infusion-field-label-container {
text-align:Left;
}
.infusion-field-input-container {
width:200px;
}
.infusion-field-label-container {
vertical-align:Middle;
}
.bodyContainer {
width:425px;
}
</style>
<div class="default beta-base beta-font-b" id="mainContent" style="height:100%">
<table cellpadding="10" cellspacing="0" class="background" style="width: 100%; height: 100%">
<tbody>
<tr>
<td align="center" valign="top">
<table bgcolor="#FFFFFF" cellpadding="20" cellspacing="0" class="bodyContainer webFormBodyContainer" width="100%">
<tbody>
<tr>
<td bgcolor="#FFFFFF" class="body" sectionid="body" valign="top">
<form accept-charset="UTF-8" action="https://xt348.infusionsoft.com/app/form/process/a74884c5636f18aad3994210d4205f39" class="infusion-form" method="POST">
<input name="inf_form_xid" type="hidden" value="a74884c5636f18aad3994210d4205f39" />
<input name="inf_form_name" type="hidden" value="Contact Us&#a;Form" />
<input name="infusionsoft_version" type="hidden" value="1.62.0.51" />
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_FirstName">First Name *</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" />
</td>
</tr>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_LastName">Last Name *</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Email">Email *</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_field_Phone1">Phone *</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_custom_Country0">Country</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<select id="inf_custom_Country0" name="inf_custom_Country0"><option value="">Please select one</option><option value="Afghanistan">Afghanistan</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Australia">Australia</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas">Bahamas</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Brazil">Brazil</option><option value="Brunei">Brunei</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burundi">Burundi</option><option value="Cabo Verde">Cabo Verde</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Central African Republic (CAR)">Central African Republic (CAR)</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Democratic Republic of the Congo">Democratic Republic of the Congo</option><option value="Republic of the Congo">Republic of the Congo</option><option value="Costa Rica">Costa Rica</option><option value="Cote d'Ivoire">Cote d'Ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="Gabon">Gabon</option><option value="Gambia">Gambia</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Greece">Greece</option><option value="Grenada">Grenada</option><option value="Guatemala">Guatemala</option><option value="Guinea">Guinea</option><option value="Guinea-Bissau">Guinea-Bissau</option><option value="Guyana">Guyana</option><option value="Haiti">Haiti</option><option value="Honduras">Honduras</option><option value="Hungary">Hungary</option><option value="Iceland">Iceland</option><option value="India">India</option><option value="Indonesia">Indonesia</option><option value="Iran">Iran</option><option value="Iraq">Iraq</option><option value="Ireland">Ireland</option><option value="Israel">Israel</option><option value="Italy">Italy</option><option value="Jamaica">Jamaica</option><option value="Japan">Japan</option><option value="Jordan">Jordan</option><option value="Kazakhstan">Kazakhstan</option><option value="Kenya">Kenya</option><option value="Kiribati">Kiribati</option><option value="Kosovo">Kosovo</option><option value="Kuwait">Kuwait</option><option value="Kyrgyzstan">Kyrgyzstan</option><option value="Laos">Laos</option><option value="Latvia">Latvia</option><option value="Lebanon">Lebanon</option><option value="Lesotho">Lesotho</option><option value="Liberia">Liberia</option><option value="Libya">Libya</option><option value="Liechtenstein">Liechtenstein</option><option value="Lithuania">Lithuania</option><option value="Luxembourg">Luxembourg</option><option value="Macedonia">Macedonia</option><option value="Madagascar">Madagascar</option><option value="Malawi">Malawi</option><option value="Malaysia">Malaysia</option><option value="Maldives">Maldives</option><option value="Mali">Mali</option><option value="Malta">Malta</option><option value="Marshall Islands">Marshall Islands</option><option value="Mauritania">Mauritania</option><option value="Mauritius">Mauritius</option><option value="Mexico">Mexico</option><option value="Micronesia">Micronesia</option><option value="Moldova">Moldova</option><option value="Monaco">Monaco</option><option value="Mongolia">Mongolia</option><option value="Montenegro">Montenegro</option><option value="Morocco">Morocco</option><option value="Mozambique">Mozambique</option><option value="Myanmar (Burma)">Myanmar (Burma)</option><option value="Namibia">Namibia</option><option value="Nauru">Nauru</option><option value="Nepal">Nepal</option><option value="Netherlands">Netherlands</option><option value="New Zealand">New Zealand</option><option value="Nicaragua">Nicaragua</option><option value="Niger">Niger</option><option value="Nigeria">Nigeria</option><option value="North Korea">North Korea</option><option value="Norway">Norway</option><option value="Oman">Oman</option><option value="Pakistan">Pakistan</option><option value="Palau">Palau</option><option value="Palestine">Palestine</option><option value="Panama">Panama</option><option value="Papua New Guinea">Papua New Guinea</option><option value="Paraguay">Paraguay</option><option value="Peru">Peru</option><option value="Philippines">Philippines</option><option value="Poland">Poland</option><option value="Portugal">Portugal</option><option value="Qatar">Qatar</option><option value="Romania">Romania</option><option value="Russia">Russia</option><option value="Rwanda">Rwanda</option><option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option><option value="Saint Lucia">Saint Lucia</option><option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option><option value="Samoa">Samoa</option><option value="San Marino">San Marino</option><option value="Sao Tome and Principe">Sao Tome and Principe</option><option value="Saudi Arabia">Saudi Arabia</option><option value="Senegal">Senegal</option><option value="Serbia">Serbia</option><option value="Seychelles">Seychelles</option><option value="Sierra Leone">Sierra Leone</option><option value="Singapore">Singapore</option><option value="Slovakia">Slovakia</option><option value="Slovenia">Slovenia</option><option value="Solomon Islands">Solomon Islands</option><option value="Somalia">Somalia</option><option value="South Africa">South Africa</option><option value="South Korea">South Korea</option><option value="South Sudan">South Sudan</option><option value="Spain">Spain</option><option value="Sri Lanka">Sri Lanka</option><option value="Sudan">Sudan</option><option value="Suriname">Suriname</option><option value="Swaziland">Swaziland</option><option value="Sweden">Sweden</option><option value="Switzerland">Switzerland</option><option value="Syria">Syria</option><option value="Taiwan">Taiwan</option><option value="Tajikistan">Tajikistan</option><option value="Tanzania">Tanzania</option><option value="Thailand">Thailand</option><option value="Timor-Leste">Timor-Leste</option><option value="Togo">Togo</option><option value="Tonga">Tonga</option><option value="Trinidad and Tobago">Trinidad and Tobago</option><option value="Tunisia">Tunisia</option><option value="Turkey">Turkey</option><option value="Turkmenistan">Turkmenistan</option><option value="Tuvalu">Tuvalu</option><option value="Uganda">Uganda</option><option value="Ukraine">Ukraine</option><option value="United Arab Emirates (UAE)">United Arab Emirates (UAE)</option><option value="United Kingdom (UK)">United Kingdom (UK)</option><option value="United States of America (USA)">United States of America (USA)</option><option value="Uruguay">Uruguay</option><option value="Uzbekistan">Uzbekistan</option><option value="Vanuatu">Vanuatu</option><option value="Vatican City (Holy See)">Vatican City (Holy See)</option><option value="Venezuela">Venezuela</option><option value="Vietnam">Vietnam</option><option value="Zambia">Zambia</option><option value="Zimbabwe">Zimbabwe</option></select>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="infusion-field-container" style="width:100%;">
<tbody>
<tr>
<td class="infusion-field-label-container">
<label for="inf_custom_Message">Message</label>
</td><td class="infusion-field-input-container" style="width:200px;">
<textarea cols="24" id="inf_custom_Message" name="inf_custom_Message" rows="5">
</textarea>
</td>
</tr>
</tbody>
</table>
</div>
<div class="infusion-submit">
<input type="submit" value="Submit" />
</div>
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
您可以使用Google Chromes代码检查器对此进行检查。
请帮忙！
谢谢！
2 个答案:
答案 0 :(得分：1)
导致悬停的特定CSS如下：
table:not(.shop_table) > tbody > tr:hover > td { background-color: #454545 }
当删除后，您将获得如下蓝色背景颜色：
table:not(.shop_table) > tbody > tr:hover > td { background-color: #46a5e5 }
所以这是从哪里开始的。您需要找到它们，然后决定如何继续。
您可以更改background-color: #fff
或者添加：
table.background > tbody > tr:hover > td { background-color: #fff }
如何继续操作取决于更改现有样式的背景颜色是否会对其他元素产生负面影响。如果进行此类更改确实会影响此站点上的其他元素（您不想生效），则需要向表中添加类选择器，如：
目前：
<table class="background" style="width: 100%; height: 100%" cellspacing="0" cellpadding="10">
更改为：
<table class="background monkey" style="width: 100%; height: 100%" cellspacing="0" cellpadding="10">
并在样式表中添加新的样式定义：
table.monkey > tbody > tr:hover > td { background-color: #fff }
答案 1 :(得分：0)
你有背景色：＃656565;在CSS中设置了很多选择器，因为你有大量的嵌套表，所以这个选择器将悬停的每个嵌套行应用背景颜色：“table：not（。shop_table）＆gt; tbody＆gt; tr：hover＆gt; td “=所需的细胞+它的父细胞+它的父细胞都在解析并改变为背景颜色。您需要更加具体的选择器。在您的情况下，您已经在各个表上拥有更多特定的类名：table.infusion-field-container＆gt; tbody＆gt; tr：hover＆gt; td
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？