Question

我试图获取.skin-1和.roll-1的背景颜色，以便在鼠标滑过.roll-1时更改颜色，我相信我的css选择器出现了问题定位。我正在使用 .roll-1：悬停〜.skin-1 {background：＃ed008c;} 改变这两个方面，并且在我将这些问题放在单独的方法之前就已经有了这个工作。

有人能让我知道我做错了什么。

<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/

Answer 2

以前， li 都是兄弟姐妹，而css 〜适用于兄弟姐妹。但是现在你已经改变了结构，并且 li 都在不同的 ul （父），所以现在它不起作用。

http://jsfiddle.net/ncv8nadj/

替换CSS

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

用

.changeColor {background: #ed008c;}

添加 jQuery

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

Answer 3

演示 - http://jsfiddle.net/victor_007/gg39g4bp/

使用父级悬停并为孩子设置样式

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

.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;
}
.catlevel:hover .roll-1,
.catlevel:hover ~ .catlevel .skin-1 {
  background: #ed008c;
}

<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>

当鼠标悬停在1 div上时，获得2个div来改变颜色

3 个答案: