:target 行为但在 CSS 中的 :hover答案

【问题标题】：:target behaviour but on :hover in CSS:target 行为但在 CSS 中的 :hover
【发布时间】：2015-05-09 22:08:46
【问题描述】：

考虑w3schools example of the `:target` selector:

<!DOCTYPE html>
<html>
<head>
<style>
:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>

当您点击anchor 引用另一个元素时，它会将p 设置为相应的id。

我想要 :target 的效果，但要在 hover 上。这是怎么做到的？

您如何设置悬停时href 在页面中指向的东西的样式？

如果这是不可能的。什么是性能最好的 javascript 解决方案？

【问题讨论】：

除非目标是后来的兄弟姐妹、后代或后来兄弟姐妹的后代，否则你不能，没有 JavaScript。虽然 reference combinator，来自 CSS 选择器级别 4 API 可能允许这样做。
@DavidThomas 在实际情况下，我只能预测我想在悬停时定位的东西具有我正在href'ing 的 id。用 javascript 完成此任务的最简单方法是什么？
@David Thomas：参考组合器已经消失了一段时间。那个 WD 已经 2 岁了，需要更新或拉取统计数据。
@BoltClock：我准确——或者，有时，甚至充分——搜索 W3C 工作草案的能力似乎有限，你有最新的链接吗？版本，或详细说明删除参考组合器的来源？我不怀疑你，但看到它被丢弃我有点难过；它似乎很有用（尽管它的语法有点不可预测/不清楚）。
dev.w3.org/csswg/selectors-4 一个目录，你会发现一组最新的编辑草稿。不太稳定，但更流行，就像夜间构建一样。

标签： css css-selectors

【解决方案1】：

因为 CSS 选择器只能从较早的元素遍历到较晚的同级元素、同级元素的后代或后代（并且不能选择父元素或前同级元素），这不能用 CSS 完成。因为悬停<a> 来设置后面的:target-ed 元素的样式，首先需要从悬停的-<a> 元素遍历到父元素。

如果要使用 JavaScript 来做到这一点，我建议：

// a named function to toggle the highlighting of the
// targeted element:
function highlightTarget(event) {
  // the 'event' is passed automagically from the
  // addEventListener() method; as is the 'this'
  // which is the element to which the event-handler
  // (this function) was bound:

  // using getAttribute() to get the value of the attribute,
  // instead of 'this.href' which would get the absolute URL,
  // replacing the leading '#' character with an empty string:
  var id = this.getAttribute('href').replace(/^#/, ''),
    // getting the element with that id:
    target = document.getElementById(id);

  switch (event.type) {
    // if this is the mouseenter event we add the 'highlight'
    // class-name:
    case 'mouseenter':
      target.classList.add('highlight');
      break;
    // on 'mouseleave' we remove the class-name:
    case 'mouseleave':
      target.classList.remove('highlight');
      break;
  }
}

// iterating over the NodeList returned by
// document.getElementsByTagName(), using
// Array.prototype.forEach():
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
  // if the href attribute (not property) begins with a '#':
  if (a.getAttribute('href').indexOf('#') === 0) {
    // we bind the highlightTarget function to handle
    // both the 'mouseenter' and 'mouseleave' events:
    a.addEventListener('mouseenter', highlightTarget);
    a.addEventListener('mouseleave', highlightTarget);
  }
});

.highlight {
  background-color: red;
}

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a>
</p>
<p><a href="#news2">Jump to New content 2</a>
</p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b>
</p>
<p id="news2"><b>New content 2...</b>
</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

不过，值得注意的是，CSS 选择器模块，第 4 级，有一个建议的解决方案，即引用组合器来解决这个问题：

以下示例在元素被聚焦或悬停时突出显示元素：

    label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */
    label:matches(:hover, :focus):not([for]) input { /* association by containment */
        box-shadow: yellow 0 0 10px; 
    }

这表明正确的语法（当然，目前当然不起作用）可能是：

a:matches(:hover) /href/ p {
  background-color: red;
}

参考资料：

CSS：
- Reference combinator (E:matches(:hover) /href/ p)。
JavaScript：

【讨论】：

@DavidThomas 接受详细解释的解决方案和 +1 参考组合器...！

【解决方案2】：

信息：

在 CSS 中，如果链接在前面并且与目标或目标的父级相邻，那么您可以执行类似的操作：

[href="#news1"]:hover ~#news1,
[href="#news2"]:hover ~#news2{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

<h1>This is a heading</h1>

<a href="#news1">Jump to New content 1</a>
<a href="#news2">Jump to New content 2</a>

<p>hover link and see target element highlight via <code>[href="#target] ~#target </code></p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> links must be ahead and adjacent to target or parents target in order to work.</p>

进一步了解，见：http://www.w3.org/TR/css3-selectors/#attribute-representation 并注意那些：http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators & http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

【讨论】：

@Harry，对，我会解决这个问题，为我的普通英语道歉；）

考虑w3schools example of the :target selector:

我想要 :target 的效果，但要在 hover 上。这是怎么做到的？

如果这是不可能的。什么是性能最好的 javascript 解决方案？

考虑w3schools example of the `:target` selector: