控制基于CSS的悬停效果 [英] Controlling CSS based hover effects

问题描述

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

To my knowledge, the answer to this is no, can't be done, but I need a second opinion:

如果我有以下： p>

If I have the following:

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

并且具有出现在 li上的背景图片a：hover 是否有可能让这个背景保持在悬停在 .sub div？这也必须工作纯CSS - 没有javascript的骗子。

and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.

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

My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.

由于图片只适用于程式码的一部分，因此我无法移动到 li 参考 li：hover a

Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.

推荐答案

尝试实现，但有可以做的许多悬停效果。

第二次更新：如果您不需要与任何互动（其他 a 标签等）在 div 中，然后以这种方式欺骗获得效果。请注意 div 中的锚点因为 z-index 而未注册。

SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.

更新我认为我现在更了解您的问题。您可以添加包装器并执行以下操作：

UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:

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

示例CSS：

Example 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的悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！