Need help on making images change when hovering over a list of text. I've been looking through several examples in here but still can't make it work. Can someone look at my code and figure out what am I doing wrong?
https://jsfiddle.net/8gnkjeze/1/
<section id="about-us" class="page-section light-bg no-pad">
<div class="container-fluid who-we-are">
<div class="row">
<div class="col-md-6 no-pad text-center">
<!-- Image -->
<div id="pic" class="pic"></div>
</div>
<div class="col-md-6 pad-60">
<div class="section-title text-left">
<!-- Title -->
<h2 class="title">Industries</h2>
</div>
<p>We have established a methodical structured approach for the design of service offerings that include maintenance, repair, and on a case-by-case basis overhaul service solutions.</p>
<div class="row">
<div class="col-md-6">
<ul class="arrow-style">
<li><div id="word" class="red"><a href="industries.html">Marine Construction</a></div></li>
<li><div class="red"><a href="industries.html#offshore-construction">Offshore Construction</a></div></li>
<li><div class="red"><a href="industries.html#industrial-construction">Industrial Construction</a></div></li>
</ul>
</div>
<div class="col-md-6">
<ul class="arrow-style">
<li><div class="red"><a href="industries.html#pipe-fabrication">Pipe Fabrication</a></div></li>
<li><div class="red"><a href="industries.html#onshore-construction">Onshore Construction</a></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Because you cannot traverse up through ancestry with CSS, and your pic holder is that way, you'll need to use a little javascript to handle this. Here's a simplified example based on the code you provided. This uses jQuery (cause I'm lazy), but can also be accomplished without it using plain ole javascript.
$("ul a").hover(function() {
$("#pic").removeClass().addClass($(this).attr('rel'));
});#pic{
width: 120px;
height: 120px;
border: 1px solid black;
margin-right: 20px;
float:left;
}
#pic.p1 {
background-image: url("http://fillmurray.com/200/300");
}
#pic.p2 {
background-image: url("http://fillmurray.com/200/200");
}
#pic.p3 {
background-image: url("http://fillmurray.com/300/300");
}
#pic.p4 {
background-image: url("http://fillmurray.com/120/120");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic"></div>
<ul>
<li><a href="#" rel="p1">Marine Construction</a></li>
<li><a href="#" rel="p2">Offshore Construction</a></li>
<li><a href="#" rel="p3">Pipe Fabrication</a></li>
<li><a href="#" rel="p4">Onshore Construction</a></li>
</ul>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments