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小提琴：

在this JS Fiddle中，将鼠标悬停在Photoshop徽标上会触发对'.projectbkg'背景属性的更改。任何有关这方面的帮助将不胜感激！

工作时间：

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

Answer 1

这：jQuery(.projectbkg)语法无效，您必须引用CSS选择器jQuery(".projectbkg")

在悬停时设置父div背景颜色/图像（jQuery）

1 个答案: