將鼠標懸停在文本列表上時更改圖像

Question

將鼠標懸停在文本列表上時，需要幫助更改圖像。 我在這里瀏覽了幾個示例，但仍然無法正常工作。 有人可以看一下我的代碼，弄清楚我在做什么錯嗎？

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>

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