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

【问题标题】：Change image when hovering over a list of text将鼠标悬停在文本列表上时更改图像
【发布时间】：2017-02-09 05:33:03
【问题描述】：

在将鼠标悬停在文本列表上时需要帮助更改图像。我一直在这里查看几个示例，但仍然无法使其工作。有人可以查看我的代码并找出我做错了什么吗？

 <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>

【问题讨论】：

只是要清楚......当将每个项目悬停在 ul 上时，#pic 会改变背景？？？ ....你将需要 JS
你能说出你到底尝试了什么吗？ @DaniP 它可以很容易地在 CSS 中完成。这是微不足道的。
哪个文本列表？？您是指
@AndreiGheorghiu 不可能使用实际标记
我猜你使用的是bootstrap，下次设置示例使用bootply bootply.com/DNo24y420z

标签： html css

【解决方案1】：

因为您无法使用 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>

【讨论】：

这非常有效，感谢您的帮助。你让它看起来很容易
很高兴为您提供帮助。如果您认为可以接受，请接受答案，以便未来的用户受益。