Javascript 当鼠标悬停在父div上时，同时更改图像和标题

当用户将鼠标悬停在父div上时，我需要能够更改标题和图片的颜色。它单独工作意味着当我将鼠标悬停在id=“cf”上时，图片会更改，但标题不会更改，反之亦然，但不会同时更改。任何帮助都将不胜感激

$（文档）.ready（函数（）{
$（“#cf img”）.hover（函数（）{
$（this.css（“-webkit过滤器”，“灰度（0）”）；
}，函数（）{
$（this.css（“-webkit过滤器”，“灰度（1）”）；
});
$（“.blue bar info”）.hover（函数（）{
$（this.css（“背景”、“粉色”）；
}，函数（）{
$（this.css（“背景”、“蓝色”）；
});
});

图画
标题
副标题
JS解决方案，但建议对此使用CSS；）

为了实现这一点，我建议您改用CSS。它是为了改变用户界面而设计的，性能比JS好得多，避免了页面加载时可能出现的FOUC

为此，可以设置默认样式，然后在
：hover
伪选择器中覆盖它们，如下所示：


#cf img{
-webkit过滤器：灰度（1）；
宽度：150px；
高度：150像素；
}
#cf:hover img{-webkit过滤器：灰度（0）；}
#cf.蓝色条信息{背景色：粉红色；}
#cf:hover.blue条信息{背景色：蓝色；}

标题
副标题
像这样的东西

  $(document).ready(function () {
        $("#cf img, .blue-bar-info").hover(function () {
            $('#cf img').css("-webkit-filter", "grayscale(0)");
            $('.blue-bar-info').css("background", "pink");
        }, function () {
            $('#cf img').css("-webkit-filter", "grayscale(1)");
            $('.blue-bar-info').css("background", "blue");
        });
    });

我相信你的代码是好的，除非你在代码中对父div使用了错误的选择器

用
$（“#cf”）
代替
$（“#cf img”）
能解决您的问题吗
 请你更详细地说明你的最终结果，我建议你不要使用JS。CSS更适合，性能也更好
  $(document).ready(function () {
        $("#cf img, .blue-bar-info").hover(function () {
            $('#cf img').css("-webkit-filter", "grayscale(0)");
            $('.blue-bar-info').css("background", "pink");
        }, function () {
            $('#cf img').css("-webkit-filter", "grayscale(1)");
            $('.blue-bar-info').css("background", "blue");
        });
    });