Html 如何仅使用CSS在单独的div中切换背景图像

我很难只用CSS将一个背景图像转换成另一个。我要完成的-->单击左栏中的.carrier1或.carrier2 div，右栏中较大的.map块背景图像将更改为与该carrier div对应的另一个背景图像

下面是到目前为止我已经想到的代码。就功能而言，不确定是否正确编写。为了不处理背景图像，我用颜色替换了这些图像

HTML-

---

任何帮助都将不胜感激。谢谢各位。

你们的要求无法实现。。。无需修改HTML。不幸的是，有。因此，无法从

#运营商

内定位您的

#地图

。您正确地使用了tilde（

~

）选择器来定位下一个相关元素，但这只能定位同级，因此只能从同一父级开始工作

本质上，这只能通过纯CSS解决，方法是将

#map

移动到

#carriers

内部：

#carriers>.carrier1:focus~#map>.map块{
背景色：红色；
过渡：缓进缓出1s；
}
#carriers>.carrier2:focus~#map>.map块{
背景颜色：黄色；
过渡：缓进缓出1s；
}

测试

你所要求的无法实现。。。无需修改HTML。不幸的是，有。因此，无法从

#运营商

内定位您的

#地图

。您正确地使用了tilde（

~

）选择器来定位下一个相关元素，但这只能定位同级，因此只能从同一父级开始工作

本质上，这只能通过纯CSS解决，方法是将

#map

移动到

#carriers

内部：

#carriers>.carrier1:focus~#map>.map块{
背景色：红色；
过渡：缓进缓出1s；
}
#carriers>.carrier2:focus~#map>.map块{
背景颜色：黄色；
过渡：缓进缓出1s；
}

测试

感谢黑曜石的反馈。这正是我所害怕的，需要证实的。如果我完全删除了#map div，用右边的填充扩展#carriers div width以包含地图的背景图像，然后将.carrier1和.carrier2 div浮动到左边，那么我是否能够切换背景图像呢？那么，我可以在单击任一子div.carrier1时切换父#carriers div的背景图像吗？或者。carrier2？不幸的是，这也不起作用，因为同样的问题也出现了；您正在尝试以父元素为目标。您可以以兄弟姐妹为目标，但决不能以CSS中的父对象为目标。令人烦恼的是，像jQuery

（$（'.carrier1'）.parent（））

这样的东西非常简单，尽管对于纯CSS，兄弟关系是最好的选择。您必须找到一种方法来处理您的显示：）明白。看起来我将不得不走jQuery路线，尽管我试图避免它，以便将加载时间保持在最小值。：/再次感谢！没问题，很高兴为您提供了帮助：）如果这回答了您的问题，请不要忘记单击投票按钮下方的灰色复选框，将解决方案标记为正确——这会将其从“未回答的问题”队列中删除，并为提问者和回答者赢得声誉。当然，在这样说的时候，你没有义务将我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情的顺利进行：）如果你想将加载时间保持在最低限度，你可以始终使用香草JavaScript。感谢黑曜石的反馈。这正是我所害怕的，需要证实的。如果我完全删除了#map div，用右边的填充扩展#carriers div width以包含地图的背景图像，然后将.carrier1和.carrier2 div浮动到左边，那么我是否能够切换背景图像呢？那么，我可以在单击任一子div.carrier1时切换父#carriers div的背景图像吗？或者。carrier2？不幸的是，这也不起作用，因为同样的问题也出现了；您正在尝试以父元素为目标。您可以以兄弟姐妹为目标，但决不能以CSS中的父对象为目标。令人烦恼的是，像jQuery

（$（'.carrier1'）.parent（））

这样的东西非常简单，尽管对于纯CSS，兄弟关系是最好的选择。您必须找到一种方法来处理您的显示：）明白。看起来我将不得不走jQuery路线，尽管我试图避免它，以便将加载时间保持在最小值。：/再次感谢！没问题，很高兴为您提供了帮助：）如果这回答了您的问题，请不要忘记单击投票按钮下方的灰色复选框，将解决方案标记为正确——这会将其从“未回答的问题”队列中删除，并为提问者和回答者赢得声誉。当然，在这样说的时候，你没有义务将我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情的顺利进行：）如果你想将加载时间保持在最低限度，你可以始终使用普通JavaScript。如果你去掉

包装器，你将能够以地图块为目标感谢@LGSon。由于Bootstrap中的结构原因，我试图将#carriers和#map分为两列。如果您删除

包装器，您将能够锁定map blockThank@LGSon。由于Bootstrap中的结构原因，我试图将#carriers和#map分为两列。

<div id="logistics">

    <div id="carriers">
        <div class="carrier1" tabindex="1">
            <img src="#" title="logo1" />
        </div>
        <div class="carrier2" tabindex="2">
            <img src="#" title="logo2" />
        </div>
    </div>

    <div id="map">
        <div class="map-block"></div>
    </div>

</div>

.carrier1:focus,
.carrier2:focus {
    outline:none;
}

.carrier1:hover,
.carrier2:hover {
    cursor: pointer;
}

#map > .map-block {
    display:block;
    width:100px;
    height:100px;
    background-color:blue;
}

#carriers > .carrier1:focus ~ #map > .map-block {
    background-color:red;
    transition: ease-in-out 1s;
}

#carriers > .carrier2:focus ~ #map > .map-block {
    background-color:yellow;
    transition: ease-in-out 1s;  
}