タイトルにしたがったマウスオーバーセクションの背景

Question

このセクションでは背景を少しインタラクティブにして、セクションの背景がタイトルに応じて変わるようにしていました。私のコードでやろうとしていることは、背景イメージを含むコンテナを持つことでした。別のタイトルにマウスを移動すると、割り当てられた背景イメージに変わります。

私が間違って行ったことがわかりません。私は以前に別のイメージ要素をホバリングして置き換えるイメージを持っていますが、スパンテキストではありません。ご意見をお聞かせください。

HTML/CSS：

.expertise_menu { 
 
    *background-image: url('../ga7-theme/img/expertise/Expertise_1.png'); 
 
    opacity: 1; 
 
    z-index: 999; 
 
} 
 
.design-consultancy span:hover img { 
 
    *background-image: url('../ga7-theme/img/expertise/Expertise_1.png'); 
 
    display: block; 
 
    *opacity: 1; 
 
    z-index: 999; 
 
} 
 
.expertise_menu .turnkey-project span:hover { 
 
    background-image: url('../ga7-theme/img/expertise/Expertise_2.png'); 
 
    opacity: 1; 
 
} 
 
.expertise_menu .inhouse-production span:hover { 
 
    background-image: url('../ga7-theme/img/expertise/Expertise_3.png'); 
 
    opacity: 1; 
 
} 
 
.expertise_menu .event-management span:hover { 
 
    background-image: url('../ga7-theme/img/expertise/Expertise_4.png'); 
 
    opacity: 1; 
 
} 
 
.expertise_menu #visual-merchandising span:hover { 
 
    background-image: url('../ga7-theme/img/expertise/Expertise_5.png'); 
 
    opacity: 1; 
 
}

<section id="expertise" class="fullscreen specific-padding-4"> 
 
    <div class="content-a"> 
 
    <div class="row"> 
 
     <div class="container col-lg-4"> 
 
     <h2 style="text-align:right;">EXPERTISE</h2> 
 
     </div> 
 
     <!-- col-lg-12 --> 
 
    </div> 
 
    <!-- row --> 
 

 
    <!-- BACKGROUND --> 
 
    <div class="fullscreen design-consultancy"></div> 
 
    <div class="fullscreen turnkey-project"></div> 
 
    <div class="fullscreen inhouse-production"></div> 
 
    <div class="fullscreen event-management"></div> 
 
    <div class="fullscreen visual-merchandising"></div> 
 

 
    <div class="content-b col-lg-4 col-sm-12"> 
 
     <div class="expertise_menu"> 
 
     <span class="design-consultancy">Design Consultancy</span> 
 
     <br> 
 
     <span class="turnkey-project">Turn Key Project</span> 
 
     <br> 
 
     <span class="inhouse-production">In-House Productions</span> 
 
     <br> 
 
     <span class="event-management">Event Management</span> 
 
     <br> 
 
     <span class="visual-merchandising">Visual Merchandising</span> 
 
     <br> 
 
     </div> 
 

 
    </div> 
 
    <!-- col-lg-12 --> 
 

 
    <div class="container-fluid col-lg-8"> 
 
     <!-- E/M/P/T/Y/ --> 
 
    </div> 
 
    <!-- col-lg-12 --> 
 
    </div> 
 
    <!-- row --> 
 
</section> 
 
<!-- container -->

Answer 1

すべてのバックグラウンドのdivを取り除くと1つのdivのを維持し、それにIDを与えます。私は例として "dynamic_background"を使用します。

<div id="dynamic_background" class="fullscreen"></div> 

な

<div id="expertise_items" class="expertise_menu"> 

のjQueryを使用して

$(function() { 
    $("#expertise_items span").hover(function() { 
    var background = $(this).attr("class"); 
    $("#dynamic_background").attr("class", background); 
    }); 
}); 

CSS だけの背景画像をレンダリングするために、あなたのCSSを更新し、 "expertise_items" としてあなたの専門知識のメニューにIDを追加します。そのクラスの一環として、あなたがコンの高さと幅を指定していることを確認してくださいあなたがあなたのイメージを望むサイズと同じか、それを反応させたい場合は、それを行うこともできます。ここで

#dynamic_background.turnkey-project { 
    background-image: url('../ga7-theme/img/expertise/Expertise_1.png'); 
} 

あなたのための一例のフィドルです：https://jsfiddle.net/adrianopolis/euc7p9qg/