Question

当将鼠标悬停在文本列表上时，需要有关更改图像的帮助。我已经在这里查看了几个例子，但仍然无法使其发挥作用。有人可以查看我的代码并弄清楚我做错了什么吗？

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

Answer 1

因为你无法通过CSS遍历祖先，而你的照片持有者就是这样，你需要使用一些小的javascript来处理这个问题。这是基于您提供的代码的简化示例。这使用jQuery（因为我懒惰），但也可以使用普通的ole javascript完成它。

＆＃13;

$("ul a").hover(function() {
  $("#pic").removeClass().addClass($(this).attr('rel'));
});

＆＃13;

#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");
}

＆＃13;

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

＆＃13;

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

1 个答案: