html - 将鼠标悬停在文本列表上时更改图像

将鼠标悬停在文本列表上时，需要帮助更改图像。我在这里浏览了几个示例，但仍然无法正常工作。有人可以看一下我的代码，弄清楚我在做什么错吗？

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>

最佳答案

因为您无法使用CSS遍历祖先，而您的图片持有者就是这种方式，所以您需要使用一些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>

关于html - 将鼠标悬停在文本列表上时更改图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39794897/