親の背景色/画像をホバリング（jQuery）に設定する

Question

特定の子要素の上にマウスを置くと、親divの背景を変更する際に問題が発生します。最初の子div '.pro1'を使用して親コンテナ'.projectbkg'の背景色を変更しようとしていますが、私が使用しているjQueryについて完全にはわかりません。

私はバリエーションを試しましたが、何も動作していないようです、私はバックグラウンドイメージとバックグラウンドカラーでこれを使用しますが、イメージで色を置き換える前にjQueryを動作させようとしています。ここで

は私のHTMLです：

<div class="projectbkg"> 
<div class="projecttabs"> 
<div class="prohead"> 
<div class="pro1"><img class="alignnone size-full wp-image-701" src="https://vanst.one/content/2017/06/PS-Icon.png" alt="" width="75" height="75" /></div> 
<div class="pro2"><img class="alignnone size-full wp-image-1857" src="https://vanst.one/content/2017/06/ai_cc_app_RGB.png" alt="" width="75" height="75" /></div> 
<div class="pro3"><img class="alignnone size-full wp-image-710" src="https://vanst.one/content/2017/06/MC-Icon.png" alt="" width="75" height="75" /></div> 
<div class="pro4"><img class="alignnone size-full wp-image-709" src="https://vanst.one/content/2017/06/INF-Icon.png" alt="" width="75" height="75" /></div> 
</div> 
</div> 
</div> 

はCSS：

/* PROJECT PANEL CSS */ 
.prohead { 
    height: 700px; 
    display: block; 
    margin: 0 auto; 
    border-right: 2px solid #f0f0f0; 
    width: 20%; 
    float: left; 
} 
.projectbkg { 
    width: 100%; 
    height: 700px; 
} 
.projecttabs { 
    width: 80%; 
    display: block; 
    margin: 0 auto; 
    padding-top: 50px; 
    padding-bottom: 50px; 
} 
.pro1, .pro2, .pro3, .pro4 { 
    display: block; 
    padding-top: 35px; 
    padding-bottom: 35px; 
    opacity: 0.3; 
    transition: 0.3s; 
    -webkit-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -o-transition: 0.3s; 
    -ms-transition: 0.3s; 
    border-top: 1px solid #f0f0f0; 
    border-bottom: 1px solid #f0f0f0; 
} 
.pro1:hover, .pro2:hover, .pro3:hover, .pro4:hover { 
    cursor: pointer; 
    opacity: 1; 
    transition: 0.3s; 
    -webkit-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -o-transition: 0.3s; 
    -ms-transition: 0.3s; 
} 
/* END PROJECT PANEL CSS */ 

のjQuery：

jQuery(document).ready(function() { 
    jQuery(".pro1").hover(function(){ 
    jQuery(".projectbkg").css("background-color", "#f0f0f0"); 
    }, function(){ 
    jQuery(".projectbkg").css("background-color", "#000"); 
    }); 
}); 

JS Fiddle：

this JS Fiddleでは、Photoshopロゴの上にマウスを置くと、'.projectbkg'のバックグラウンドプロパティが変更されます。これに関する助けに感謝します！

WORKING FIDDLE：

https://jsfiddle.net/5p3qoe8b/1/

Answer 1

この：jQuery(.projectbkg)が無効な構文で、あなたがあなたの質問に関係のないCSSセレクタjQuery(".projectbkg")