Question

据我所知，答案是否定的，不能做，但我需要第二个意见：

如果我有以下内容：

<li>
    <a >#</a>
    <div class="sub">
    #
    </div>
</li>

并且li a:hover上显示的背景图片是否可以在h .sub div上保留该背景？这也必须工作纯CSS - 没有javascript作弊。

我的理解是因为.sub不是a的孩子，我们无法在css中引用它来保持悬停。

由于图片仅适用于代码的一部分，因此我无法将其移至li和参考li:hover a。

Answer 1

如果您无法在class上使用li或将div.sub修改为a，则可能在没有Javascript的情况下运气不佳：

Is there a CSS parent selector?

但是，如果可以，您可以使用：

<ul>
  <li class="sub">
      <a>Class #</a>
      <div class="sub">#</div>
  </li>
  <li>
      <a>Inner #
          <div class="sub">#</div>
      </a>
  </li>
  <li>
      <a>None #</a>
      <div class="sub">#</div>
  </li>
</ul>

li.sub:hover,
li a:hover {
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
    border: 1px solid blue;
    display: block;
}
.sub {
    border: 1px solid green;
}

http://jsfiddle.net/B7Au2/4/

Answer 2

我不知道你是否可以修改html，但如果可以，请尝试交换div和a：

<li>
    <div class="sub">
    #
    </div>
    <a >#</a>
</li>

现在您可以使用相邻的兄弟选择器：

li a:hover, li .sub:hover + a {background:url('some-image.png')}

不幸的是，没有办法通过CSS选择前一个元素：这就是你需要交换元素的原因。

Answer 3

不确定您要实现的目标，但有many hover effects that can be done。

第二次更新：如果您不需要与a，then this way cheats to get the effect中的任何内容进行互动（其他div标记等）。请注意div内的锚点如何因z-index而无法注册。

更新我想我现在更了解您的问题。你能添加一个包装器和do the following吗？：

示例HTML：

<ul>
  <li>
    <div>  
      <a>Some anchor text</a>
      <div class="sub">Some div content <a>and anchor</a></div>
    </div>
  </li>
</ul>

CSS示例：

li:hover {
    background-color: cyan;
}


li > div:hover > a {
    background-color: green;
}

a:hover {
    color: yellow;
    display: block;
}

a:hover + .sub {
    outline: 1px solid blue;
}

.sub:hover {
    color: red;
    outline: 1px solid red;
}

控制基于CSS的悬停效果

3 个答案:

示例HTML：

CSS示例：