user7381033
Reputation: 21
input:hover + label not working in Chrome
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">
<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>
Upvotes: 2
Views: 1115
Answers (1)
Facundo La Rocca
Reputation: 3866
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">
<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>Let me know if it works. Thanks
Upvotes: 3
Related Questions
- Html, Css - On hover style not working for submit form input type
- Only apply hover selector on input not label
- Problem with getting the input button to hover and fuse with the input text
- button is causing input fields to move up on hover (on chrome)
- Why is hover for input triggered on corresponding label in CSS?
- checkbox:hover + label doesn't work in Chrome 49,50
- HTML label before input CSS hover states
- Hover over input label not working
- Using input field as label not working in Chrome
- CSS Hover Not Working in Google Chrome