css - 将鼠标悬停在 1 个 div 上时，让 2 个 div 改变颜色

Question

我试图让 .skin-1 和 .roll-1 的背景颜色在鼠标滑过 .roll-1 时改变颜色，我相信我的 css 选择器定位有问题。我在用着 .roll-1:hover ~ .skin-1{background: #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>

Answer 1

.roll-1:hover ~ .skin-1{background: #ed008c;}//在这里你选择悬停所有包含 slin-1 的 roll-1

从你的 html 来看，这里没有包含 skin-1 的 roll-1。

来源: http://www.w3schools.com/cssref/css_selectors.asp

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

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

示例:http://jsfiddle.net/p0y49hk9/1/