1
FirefoxとIEでのアコーディオンのラベルのオンホバーはChromeではオンではありません。 Chromeを使用しているときにはカーソルも色も変わりません。何時間もオンラインで探していて、解決策を見つけることができません。クロムにカーソルを置くと、ポインタや色の変化がないため、タブのリンクがあるとは言えません。最初の考えはポジショニング、必要なウェブキット、または償却されたタグと関係があるかもしれません。これは私が更新している誰かが書いた古いコードです。どんな助けもありがとうございます。 FYI-不要なコードをたくさん出しました。なぜなら、私はここにあまりにも多くを置くことしかできないからです。チェックインされた入力+ラベルは正常に動作し、ホバーは基本的に同じCSSを使用するので、なぜChromeで動作しないのかわかりません。入力：ホバー+ラベルが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>
なぜC＃/ VSタグですか？ – Sybren