[英]Change image when hovering over a list of text
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/ 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. 因为您无法使用CSS遍历祖先,而您的图片持有者就是这种方式,所以您需要使用一些JavaScript来处理此问题。 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.
这使用jQuery(因为我很懒),但是如果不使用普通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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.