4

Here in the sample fiddle hover ing over将First paraa的背景颜色更改为红色

  • a和#p1兄弟姐妹一样

  • 如果有任何父子（立即或嵌套）b/w 两个元素，这种技术（通过更改 b/w 中的选择器）将起作用

    但我正在寻找的是：
    有没有办法在鼠标悬停时更改Second paraa的背景颜色；

注意：我知道我可以使用 JavaScript/jQuery 轻松做到这一点，但我正在寻找css方式。

4

2 回答 2

2

CSS4 将提供此功能。然而，遗憾的是，它甚至还不是最终的规范，也没有在任何浏览器中实现。（即使它在浏览器中实现，也需要一些时间来获得足够的安装基础才能在日常 CSS 代码中使用）。

目前，您唯一现实的选择是 Javascript。（当然，这种事情在 jQuery 中非常容易）

于 2013-06-16T15:15:12.123 回答
2

更新：仍然有一些非常时髦的 Finagling！

信不信由你，这段代码可以在 FF、Chrome、IE9 和 10中执行您想要的操作（参见示例）。是的，正如Pumbaa80 所指出的那样，这是一个“黑客”。但我喜欢对看似不可能的事情进行“工作”黑客攻击。是的，由于“hackishness”，它并不适用于所有情况（可能不适用于您的“真实”世界情况）。

更新实现了什么

  1. 我相信我在 FF 和 Chrome 中发现了一个小错误，这会导致它有时在不超过<a>.
  2. 我想出了如何通过在( ) 和div 父级之间插入body:before伪元素来让 IE 工作。要工作，必须有一个集合然后（没有它，就好像它甚至不存在用于“阻塞”目的）。意识到此阻塞至少有两个副作用（可能还有其他一些副作用）：（a）中的链接不可点击，以及（b）正如 OP 在评论中指出的那样，文本中的文本将不可选择。z-index: -1#p1z-index: -2#out:beforebackground-coloropacity: 0#p1#p1

这是修改后的代码，基本上只是针对#sec悬停效果，但我确实在此处添加了原始#p1悬停效果的组合代码，现在触发了 off #out:hover。但是，代码使得只有<a> 内部 #out触发#out:hover：

body:before { /* used to "block" hover of #p1 triggering */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: cyan;
  opacity: 0;
}

#out {
  height: 0; /* no height of its own; helped the FF/Chrome occasional miss-hover bug */
}

#out:hover #p1, /* revised #p1 hover code */
#out:hover + div p { /* hover of #out triggers for #sec */
  background-color: red;
}

#out a { 
  float: left; /* helps cause #out to only trigger on anchor */
}

#p1 {
  float: left; /* clears the anchor */
  width: 100%; /* keeps it normal div width of 100% */
  position: relative; /* needed for z-index */
  z-index: -2;  /* allows #out to only trigger on anchor and not #p1 hover */
}

#sec {
  clear: left; /* clears floats above it so layout remains as it was */
}

显然，元素“不相关”是纯 CSS 解决方案的主要问题。我在这里尝试实现的目标（主要成功地用于主要浏览器......谁知道移动设备等浏览器）正在利用父元素关系以使<a>唯一的悬停（在第一个父元素内) 是父元素本身的唯一触发器:hover，这样我就可以使用它来为所有<p>元素执行悬停效果。

于 2013-06-23T03:38:23.210 回答