Css 当悬停在1个div上时，获得2个div以更改颜色

我正在尝试使.skin-1和.roll-1的背景色在鼠标滚动时改变颜色。roll-1，我相信我的css选择器定位有问题。 我正在使用 .roll-1:hover~.skin-1{背景：ed008c；} 在我把li分为不同的ul之前，这两个都改变了

有人能告诉我我做错了什么吗

<style>
.catlevel ul {list-style: none;}
.catlevel ul li{float: left;}
.catlevel ul li img{padding:10px;}
.catlevel li a {display: block;}
.mypad{margin:0 12px 10px 0;}
.endpad{margin:0 0 10px 0;}
.rollpad{margin: 0 10px 0 0;}
.dock-menu {width: 100%;padding: 0;margin: 0;text-align: center;font-size: 0;}
.dock-menu-list {display: inline-block;padding: 0;list-style: none;}
.dock-menu-list li {display: inline-block;margin: 0;padding: 0;min-width: 75px;min-height: 75px;}
.dock-menu-list li img {display: inline-block;cursor: pointer;padding:10px}

.roll-1, .skin-1 {background: #baa3d3;-webkit-box-shadow: 0 0 3px rgba(153,153,153,0.25);box-shadow: 0 0 3px rgba(153,153,153,0.25);transition: background 1s;-webkit-transition: background 1s;}

.roll-1:hover {background: #ed008c;}
.roll-1:hover ~ .skin-1{background: #ed008c;}
</style>

<div id="mContainer">
<div id="categorylist">
<div id="catgoldspot"></div>
<div id="catgoldspot"></div>
<div class="catlevel">
<div class="dock-menu">
<ul class="dock-menu-list">
    <li class="roll-1 rollpad"><a href="#"><img src="main.jpg" /></a></li>
</ul>
</div>
</div>
<div class="catlevel">
<ul class="nopad">
    <li class="skin-1 mypad"><a href="#"><img src="test.jpg" /></a></li>

</ul>
</div>
</div>
</div>

以前，李的两个兄弟姐妹都是兄弟姐妹，css~适用于兄弟姐妹。 但是现在你已经改变了结构，而且两个李在不同的位置，所以现在它不起作用了

替换CSS

与

并添加jQuery

.roll-1:hover~.skin-1{background:ed008c；}//在这里，您可以选择对包含slin-1的所有roll-1进行悬停

从您的html中，这里没有包含skin-1的roll-1

资料来源：

作为解决方案，我建议使用jquery脚本：

$('.roll-1').hover(function(){
    $('.skin-1').css('background', '#ed008c');
}, function(){
    $('.skin-1').css('background', '#baa3d3');
});

示例：

演示-

使用父对象悬停并设置子对象的样式

.catlevel:hover .roll-1, .catlevel:hover ~ .catlevel .skin-1 {
    background: #ed008c;
}

.catlevel ul{ 列表样式：无； } 李国章博士{ 浮动：左； } .catlevel ul li img{ 填充：10px； } 李安{ 显示：块； } mypad先生{ 利润率：0 12px 10px 0； } endpad先生{ 裕度：0 10px 0； } .rollpad{ 裕度：0 10px 0 0； } .码头菜单{ 宽度：100%； 填充：0； 保证金：0； 文本对齐：居中； 字号：0； } .dock菜单列表{ 显示：内联块； 填充：0； 列表样式：无； } .dock菜单列表li{ 显示：内联块； 保证金：0； 填充：0； 最小宽度：75px； 最小高度：75px； } .dock菜单列表li img{ 显示：内联块； 光标：指针； 填充：10px } .roll-1， .皮肤-1{ 背景：baa3d3； -webkit盒阴影：0 0 3px rgba153、153、153、0.25； 盒影：0 0 3px rgba153、153、153、0.25； 过渡：背景1s； -webkit转换：背景1s； } .catlevel:悬停.滚动-1， .catlevel:hover~.catlevel.skin-1{ 背景：ed008c； }

---

对于任何类型的相邻选择器来说，它们都必须共享一个父级…这里不是这种情况。因此在当前的结构中css不起作用。所以我需要使用javascript或jquery？W3schools链接在这里通常不受欢迎。。。试试Mozilla的文档。有趣的是，我将在我的主脚本中尝试一下。我已经实现了一个jQuery解决方案，但是有一个css解决方案也很好，谢谢。

$(function() {
    $(document).on({
        mouseenter: function() {
            $('.roll-1, .skin-1').addClass('changeColor');
        },
        mouseleave: function() {
            $('.roll-1, .skin-1').removeClass('changeColor');
        }
    }, ".roll-1");
});
</script>

$('.roll-1').hover(function(){
    $('.skin-1').css('background', '#ed008c');
}, function(){
    $('.skin-1').css('background', '#baa3d3');
});

.catlevel:hover .roll-1, .catlevel:hover ~ .catlevel .skin-1 {
    background: #ed008c;
}