Javascript 将鼠标悬停在细分曲面上时更改主div的背景

我有一个包含3个子项的容器和Jquery：

$（函数（）{
$（'.sub1'）.hover（函数（）{
$（'#container'）.css（'background-image'，'url（../img/plan.jpg'））；
}，函数（）{
//在鼠标移出时，重置背景颜色
$（'容器'）.css（'背景色'，''）；
});
});

这是链接1
这是链接2
这是链接3
您正在重置背景颜色，而不是背景图像。我冒昧地让它也适用于所有潜艇。：）


$（函数（）{
$（'#container'）。在（'mouseover'，'[class^=“sub”]'，函数（）上{
var container=$（“#container”）；
开关（$（this.attr（'class'））{
案例“sub1”：
css（'background-image'，'url（'http://placehold.it/500x50")');
打破
案例“sub2”：
css（'background-image'，'url（'http://placehold.it/500x60")');
打破
案件‘sub3’：
css（'background-image'，'url（'http://placehold.it/500x70")');
打破
违约：
}
});
$（'#container'）。在（'mouseout'，'[class^=“sub”]'，函数（）上{
$（'容器'）.css（'背景图像'，''）；
});
});

这是链接1
这是链接2
这是链接3
您正在重置背景颜色，而不是背景图像。我冒昧地让它也适用于所有潜艇。：）


$（函数（）{
$（'#container'）。在（'mouseover'，'[class^=“sub”]'，函数（）上{
var container=$（“#container”）；
开关（$（this.attr（'class'））{
案例“sub1”：
css（'background-image'，'url（'http://placehold.it/500x50")');
打破
案例“sub2”：
css（'background-image'，'url（'http://placehold.it/500x60")');
打破
案件‘sub3’：
css（'background-image'，'url（'http://placehold.it/500x70")');
打破
违约：
}
});
$（'#container'）。在（'mouseout'，'[class^=“sub”]'，函数（）上{
$（'容器'）.css（'背景图像'，''）；
});
});

这是链接1
这是链接2
这是链接3
当鼠标悬停在每个
.sub
上时，颜色应该是红色的，反之则是绿色的
然后你可以把图像放进去

编辑：
在鼠标悬停时为您添加图像鼠标悬停时为您获取图像鼠标悬停时为您获取图像删除并设置颜色


$（函数（）{
$（'#container>div'）。悬停（函数（）{
$（'#container'）.css（'background-image'，'url'）(http://www.placecage.com/200/300)');
console.log（“鼠标悬停”）；
}，函数（）{
//在鼠标悬停时，重置背景颜色
$（“#容器”）.css({
“背景色”：“绿色”，
“背景图像”：“无”
});
console.log（“鼠标退出”）；
});
});

这是链接1
这是链接2
这是链接3
当鼠标悬停在每个
.sub
上时，颜色应该是红色的，反之则是绿色的
然后你可以把图像放进去

编辑：
在鼠标悬停时为您添加图像鼠标悬停时为您获取图像鼠标悬停时为您获取图像删除并设置颜色


$（函数（）{
$（'#container>div'）。悬停（函数（）{
$（'#container'）.css（'background-image'，'url'）(http://www.placecage.com/200/300)');
console.log（“鼠标悬停”）；
}，函数（）{
//在鼠标悬停时，重置背景颜色
$（“#容器”）.css({
“背景色”：“绿色”，
“背景图像”：“无”
});
console.log（“鼠标退出”）；
});
});

这是链接1
这是链接2
这是链接3
我认为代码中唯一的错误是重置了
背景色，而不是
背景图像
属性

$(function() {
 $('.sub1').hover(function() { 
   $('#container').css('background-image', 'url("../img/plan.jpg")');
 }, function() {
   // on mouseout, reset the background colour
   $('#container').css('background-image', ''); // definately here is the error
 });
});

我认为代码中唯一的错误是重置了
背景色
，而不是
背景图像
属性

$(function() {
 $('.sub1').hover(function() { 
   $('#container').css('background-image', 'url("../img/plan.jpg")');
 }, function() {
   // on mouseout, reset the background colour
   $('#container').css('background-image', ''); // definately here is the error
 });
});

您不应该重置
背景图像
属性而不是
背景颜色
？看看这个示例，您试图在这里实现什么效果，它应该是什么样子的？它代表什么，某种导航菜单？不知道这是否仅仅使用CSS就可以解决。顺便看看我使用id的方式，比如容器和类，比如sub1-sub2-sub3等，只是为了让你们更容易阅读。我的代码大部分时间都是一团糟哈哈。（顺便说一句，我编辑该网站是为了从中学习，我没有做到。）你不应该重置
背景图像
属性而不是
背景颜色
？看看这个示例，你想在这里实现什么效果，它应该是什么样子的？它代表什么，某种导航菜单？不知道这是否仅仅使用CSS就可以解决。顺便看看我使用id的方式，比如容器和类，比如sub1-sub2-sub3等，只是为了让你们更容易阅读。我的代码大部分时间都是一团糟哈哈。（顺便说一句，我编辑该网站是为了从中学习，我没有做到。）谢谢，我使用了这个回复，并将其作为awnser进行营销。谢谢。有时候我真是太傻了哈哈：）谢谢，我用这个回复把它当作awnser来推销。谢谢。有时候我真的很傻，哈哈：）我也得说声谢谢，因为你在潜艇上做的那件事让我很好奇。一旦我把这整件事做好，我一定会调查的不客气，祝你好运。简短说明：
[class^=“sub”]
针对以“sub”开头的所有类，但在本设置中，仅当在
#容器内时
$（this）.attr（'class'）
获取switch语句的完整类名。其余的我想你明白了编辑后，我使用此代码。这正是我想要的。看