html - 输入 :hover + label not working in Chrome

标签 html css google-chrome

Accordion 中标签的悬停在 Firefox 和 IE 中有效，但在 Chrome 中无效。使用 Chrome 时没有光标，颜色也没有变化。一直在网上寻找几个小时，找不到任何解决方案。在 chrome 中，您无法分辨选项卡的链接，因为当您将鼠标悬停在它们上方时，没有指针或颜色变化。 Mu首先想到的是定位，需要一个web-kit，又或者跟贬值的标签有关系。这是我正在更新的其他人编写的旧代码。任何帮助表示赞赏。仅供引用-我删除了很多不必要的代码，因为它们只会让我在这里放这么多。选中的输入 + 标签工作正常，悬停使用基本相同的 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>

最佳答案

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

使用:input + label:hover 取而代之的是: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>

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

关于html - 输入 :hover + label not working in Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41493827/

上一篇：javascript - Angular 过滤对象的多个字符串

下一篇：javascript - 在 WebBrowser 控件中检测滚动到底部

相关文章：

html - 为什么 h2 没有出现在页面的任何地方？

html - 如果不使用 ','，样式将不适用

css - 带有 chrome 和 IE 的 Html-List css

javascript - 使用 chrome 开发工具在代码中找到 http 请求的位置

html - Bootstrap 第二个选项卡内容在为第一个选项卡内容 div 留出空间后开始

c# - 如何使用 C# 调整 Internet Explorer 设置

html - 将整个 html 文本限制为 2 行

javascript - 没有折叠的相同导航栏

javascript - 'opcode -1' 在 Chrome 中是什么意思？

html - 导航到不同部分时，一页网站没有响应

©2024 IT工具网  联系我们