jQuery で問題が発生しています。さまざまなテスト環境で動作させることができますが、開発サイトでは動作しません。競合またはそれを引き起こしている原因を見つけることができないようです。
動作方法: アイコンにカーソルを合わせると、上に表示されている div が変更されます。ここで動作しています: http://codepen.io/redbranchmedia/pen/dkiCBとここ: http://jsfiddle.net/nXzFX/
HTML:
<div class="outercontainer">
<div class="slidecontainer slide1">
<div class="innercontainer">
<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
<div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract & engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p>
</div>
<div class="ctabutton">
<p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p>
<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
<h3 class="ctaaction">Let's Talk >></h3>
</div>
</div>
</div>
<div class="slidecontainer slide2 hiddenslide">
<div class="innercontainer">
<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
<div class="prodpara"><h2>Source & CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p>
</div>
<div class="ctabutton">
<p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
<h3 class="ctaaction">Request a Demo >></h3>
</div>
</div>
</div>
<div class="slidecontainer slide3 hiddenslide">
<div class="innercontainer">
<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
<div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from one system.</p>
</div>
<div class="ctabutton">
<p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
<h3 class="ctaaction">Request a Demo >></h3>
</div>
</div>
</div>
<div class="slidecontainer slide4 hiddenslide">
<div class="innercontainer">
<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
<div class="prodpara"><h2>Career Sites</h2><p>Promote jobs and strengthen your employer brand by building career sites using a simple Content Management System.</p>
</div>
<div class="ctabutton">
<p class="ctatext">Deliver your employer brand every- where with Talemetry Career Sites.</p>
<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
<h3 class="ctaaction">Request a Demo >></h3>
</div>
</div>
</div>
<div class="slidecontainer slide5 hiddenslide">
<div class="innercontainer">
<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
<div class="prodpara"><h2>Apply</h2><p>Capture more of the best applicants by creating a simple, integrated, and social and mobile-ready application process.</p>
</div>
<div class="ctabutton">
<p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
<h3 class="ctaaction">Request a Demo >></h3>
</div>
</div>
</div>
<div class="iconcontainer">
<div class="icon icon1" data-slide="slide1">
<img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/talemetry_icon2.png">
<p>Talemetry</p>
</div>
<div class="icon icon2" data-slide="slide2">
<img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/source_and_crm.png">
<p>Source & CRM</p>
</div>
<div class="icon icon3" data-slide="slide3">
<img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/job_broadcast.png">
<p>Job Broadcast</p>
</div>
<div class="icon icon4" data-slide="slide4">
<img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/career_sites.png">
<p>Career Sites</p>
</div>
<div class="icon icon5" data-slide="slide5">
<img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/apply.png">
<p>Apply</p>
</div>
</div>
CSS:
.outercontainer {
width:100%;
}
.slidecontainer {
width:100%;
height:285px;
}
.slidecontainer.hiddenslide {
display:none;
}
.slidecontainer.slide1 {
background-color:#b7be10;
}
.slidecontainer.slide2 {
background-color:#374bb5;
}
.slidecontainer.slide3 {
background-color:#ef123e;
}
.slidecontainer.slide4 {
background-color:#efae00;
}
.slidecontainer.slide5 {
background-color:#9d5bb6;
}
.slidecontainer .innercontainer {
max-width:940px;
}
img.productimg {
float:right;
}
.prodpara > H2 {
font-size:30px;
color:#fff;
}
.prodpara > p {
font-size:18px;
color:#fff;
}
.ctabutton p.ctatext {
font-size:15px;
}
p.ctaline {
font-size:;
}
h3.ctaaction {
font-size:20px;
}
.iconcontainer {
max-width:940px;
width:100%;
margin:0 auto;
}
.iconcontainer .icon {
float:left;
width:90px;
text-align: center;
}
.iconcontainer .icon p {
color:#585858;
font-size: 14px;
}
JavaScript:
<script type="text/javascript">
$('.iconcontainer .icon').on(
{
mouseenter: function()
{
$('.outercontainer .slidecontainer').addClass('hiddenslide');
var show_slide = $(this).attr('data-slide');
$('.' + show_slide).removeClass('hiddenslide');
}
});
</script>
ここの開発サイトで動作させることができません (必要な場所): http://talemetry.redbranchmedia.com/
スライダーが干渉しているのではないかと思ったので、テストページにも設定しました:http://talemetry.redbranchmedia.com/testing-page/
残念ながら、開発サイトのどこでも機能していませんが、JSFiddle と CodePen のサイトでは機能しています。
Google Developer Libraries からさまざまなバージョンの jQuery を呼び出す サイトの内部で jQuery を呼び出す スクリプトの " $ " を "jQuery" に置き換える (テーマの作成者はこれを行ったようです) など、はるかに。
何が競合を引き起こし、これが実行できないのか途方に暮れています。助けていただければ幸いです。