Question

手风琴中标签的onhover适用于Firefox和IE，但不适用于Chrome。使用Chrome时没有诅咒和颜色变化。在网上看了几个小时，无法找到任何解决方案。在chrome中，您无法分辨标签的链接，因为当您将鼠标悬停在标签上时没有指针或颜色更改。首先想到的是定位，需要的网络工具包，或者它可能与折旧标签有关。这是我正在更新的其他人编写的旧代码。任何帮助表示赞赏。仅供参考 - 我拿出了很多不必要的代码，因为他们只会让我在这里投入太多。选中的输入+标签工作正常，悬停使用基本相同的CSS，因此我不明白为什么它在Chrome中不起作用。

#accordion {margin-top:30px;}
#mainSpec {
  margin: 20px 20px 0 0;
}
sectionSpec {
   display: none;
   margin-right: 20px;
        }
input {
  display: none;
}
label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 10px;
  border: 1px solid transparent;
}

label:before {
  margin-right: 10px;
  font-size:18px;
}

input:hover + label  {
  color: #2f4977;
    border-top: 2px solid #2f4977;
    cursor: pointer;
}

input:checked + label {
  color: #df7c29;
    border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}
 label:before {
    margin: 0;
    font-size: 18px;
  }
}

}

#accordion h4 {color:#df7c29;}

</asp:content>
            <div class="container content" id="spectators" style="margin-top:40px;">
                <section class="row">
               <div class="col-sm-8" style="padding-bottom:80px;">
                <h3 class="tickets grounds">Information</h3>
             <div id="accordion">
                 <div id="mainSpec">
                     <input id="tab1" type="radio" name="tabs" checked />
                     <label for="tab1" class="fa-bullhorn">Policies</label>

                     <input id="tab2" type="radio" name="tabs" />
                     <label for="tab2" class="fa-calendar">Schedule</label>

                     <input id="tab3" type="radio" name="tabs" />
                     <label for="tab3" class="fa-bus">Transportation</label>

                     <input id="tab4" type="radio" name="tabs" />
                     <label for="tab4" class="golf">
                         <img src="img/golf.png" alt="" class="golf">Course</label>

                     <input id="tab5" type="radio" name="tabs" />
                     <label for="tab5" class="fa-question">FAQs</label>

                     <sectionspec id="content1">
  <div accordian-container>
    <h4>Policies</h4>
    <div class="col-md-7">
    <a href="policies.aspx"> <img src="img/Policies_Image.jpg" alt="" class="policy-images"> </a>
    </div>
    <div class="col-md-5">
      <p>
      Review policies on prohibited items.
    </p>
     <div class="btn-group">
                    <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
                </div>
    </div>
    </div>
  </sectionspec>

                     <sectionspec id="content2">
    <div accordian-container>
        <h4>Schedule</h4>
         <div class="col-md-7">
           <a href="schedule.aspx"> <img src="img/schedule_image.jpg" alt="" class="schedule-images"> </a>
          </div>
        <div class="col-md-5">
         <p>Check out the schedule of events </p>
            <div class="btn-group">
            <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
            </div>
        </div>
    </div>
  </sectionspec>

                     <sectionspec id="content3">
  <div accordian-container>
     <h4>Transportation</h4>
      <div class="col-md-7">
        <a href="transportation.aspx"> <img src="img/transportation_image.jpg" alt="" class="transportation"> </a>
      </div>
      <div class="col-md-5">
       <p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
       <div class="btn-group">

       </div>
     </div>
  </div>
  </sectionspec>
                     <sectionspec id="content4">
     <div accordian-container>
       <h4>Course</h4>
         <div class="col-md-7">
         <a href="course.aspx"> <img src="img/course_image.jpg" alt="" class="golf course" /> </a>
         </div>
        <div class="col-md-5">
          <p style="font-weight: bold; color: red">
   coming soon!
    </p>
             <p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
             <p style="font-weight: bold; color: red"><a href="course.aspx" style="color: red; font-weight: bold">View aerial</a></p>
        </div>
      </div>
  </sectionspec>
                     <sectionspec id="content5">
   <div accordian-container>
    <h4>FAQs</h4>
     <div class="col-md-7"> 
       <a href="faq.aspx"> <img src="img/faqs_image.jpg" alt="" class="faq"> </a>
      </div>
      <div class="col-md-5">
       <p>Frequently Asked Questions. </p>
        <div class="btn-group">
          <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
        </div>
      </div>
    </div>
  </sectionspec>
                 </div>
             </div><!--close accordion-->   
             </div><!--close col-sm-8-->
        </section>
    </div>
</asp:content>

Answer 1

我认为你应该改变你的悬停声明：

使用：input + label:hover Intead of：input:hover + label

为什么？因为（如果我没有误解）你想要的是在标签上应用效果，而不是在输入中。

#accordion {margin-top:30px;}
#mainSpec {
  margin: 20px 20px 0 0;
}
sectionSpec {
   display: none;
   margin-right: 20px;
        }
input {
  display: none;
}
label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 10px;
  border: 1px solid transparent;
}

label:before {
  margin-right: 10px;
  font-size:18px;
}

input + label:hover  {
  color: #2f4977;
    border-top: 2px solid #2f4977;
    cursor: pointer;
}

input:checked + label {
  color: #df7c29;
    border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}
 label:before {
    margin: 0;
    font-size: 18px;
  }
}

}

#accordion h4 {color:#df7c29;}

    </style>

</asp:content>
            <div class="container content" id="spectators" style="margin-top:40px;">
                <section class="row">
               <div class="col-sm-8" style="padding-bottom:80px;">
                <h3 class="tickets grounds">Information</h3>
             <div id="accordion">
                 <div id="mainSpec">
                     <input id="tab1" type="radio" name="tabs" checked />
                     <label for="tab1" class="fa-bullhorn">Policies</label>

                     <input id="tab2" type="radio" name="tabs" />
                     <label for="tab2" class="fa-calendar">Schedule</label>

                     <input id="tab3" type="radio" name="tabs" />
                     <label for="tab3" class="fa-bus">Transportation</label>

                     <input id="tab4" type="radio" name="tabs" />
                     <label for="tab4" class="golf">
                         <img src="img/golf.png" alt="" class="golf">Course</label>

                     <input id="tab5" type="radio" name="tabs" />
                     <label for="tab5" class="fa-question">FAQs</label>

                     <sectionspec id="content1">
  <div accordian-container>
    <h4>Policies</h4>
    <div class="col-md-7">
    <a href="policies.aspx"> <img src="img/Policies_Image.jpg" alt="" class="policy-images"> </a>
    </div>
    <div class="col-md-5">
      <p>
      Review policies on prohibited items.
    </p>
     <div class="btn-group">
                    <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
                </div>
    </div>
    </div>
  </sectionspec>

                     <sectionspec id="content2">
    <div accordian-container>
        <h4>Schedule</h4>
         <div class="col-md-7">
           <a href="schedule.aspx"> <img src="img/schedule_image.jpg" alt="" class="schedule-images"> </a>
          </div>
        <div class="col-md-5">
         <p>Check out the schedule of events </p>
            <div class="btn-group">
            <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
            </div>
        </div>
    </div>
  </sectionspec>

                     <sectionspec id="content3">
  <div accordian-container>
     <h4>Transportation</h4>
      <div class="col-md-7">
        <a href="transportation.aspx"> <img src="img/transportation_image.jpg" alt="" class="transportation"> </a>
      </div>
      <div class="col-md-5">
       <p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
       <div class="btn-group">

       </div>
     </div>
  </div>
  </sectionspec>
                     <sectionspec id="content4">
     <div accordian-container>
       <h4>Course</h4>
         <div class="col-md-7">
         <a href="course.aspx"> <img src="img/course_image.jpg" alt="" class="golf course" /> </a>
         </div>
        <div class="col-md-5">
          <p style="font-weight: bold; color: red">
   coming soon!
    </p>
             <p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
             <p style="font-weight: bold; color: red"><a href="course.aspx" style="color: red; font-weight: bold">View aerial</a></p>
        </div>
      </div>
  </sectionspec>
                     <sectionspec id="content5">
   <div accordian-container>
    <h4>FAQs</h4>
     <div class="col-md-7"> 
       <a href="faq.aspx"> <img src="img/faqs_image.jpg" alt="" class="faq"> </a>
      </div>
      <div class="col-md-5">
       <p>Frequently Asked Questions. </p>
        <div class="btn-group">
          <a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
        </div>
      </div>
    </div>
  </sectionspec>
                 </div>
             </div><!--close accordion-->   
             </div><!--close col-sm-8-->
        </section>
    </div>
</asp:content>

让我知道它是否有效。感谢

输入：hover +标签在Chrome中不起作用

1 个答案: