input:hover + label not working in Chrome - html

Question

The onhover for the labels in the accordion work in Firefox and IE but not in Chrome. No curser and no color change when using Chrome. Been looking online for hours and can't find any solution. In chrome you can not tell there is a link for the tabs because there is no pointer or color change when you hover over them. Mu first thoughts are positioning, a needed web-kit, or maybe it has something to do with the depreciated tags. This is old code written by someone else that I'm updating. Any help is appreciated. FYI- I took out alot of the unnecessary code because they will only let me put so much in here. The checked input + label works fine and the hover uses basically the same css so I don't understand why it doesn't work in 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">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</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">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</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">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</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">
<img src="img/course_image.jpg" alt="" class="golf course" />
</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">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</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

I think you should change your hover declaration:
Use: input + label:hover
Intead of: input:hover + label
Why? Because (If I'm not misunderstanding) what you want is apply the effect on the label, not in the input.
#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">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</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">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</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">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</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">
<img src="img/course_image.jpg" alt="" class="golf course" />
</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">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</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>
Let me know if it works.
Thanks