:target 行为但在 :hover in CSS

Question

考虑 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 时，它会使用相应的 id.

设置 p 的样式

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

悬停时如何设置页面中 href 指向的内容的样式？

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

Answer 1

因为CSS selector只能从较早的元素遍历到较晚的兄弟、后代或兄弟的后代（而不能select父元素或前兄弟，元素），这不能用 CSS 来完成。由于悬停 <a> 以设置后来的 :target 元素的样式首先需要从悬停的 <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 级，有一个建议的解决方案，参考组合器，来解决这个问题：

The following example highlights an element when its is focused or hovered-over:

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

参考文献：

Answer 2

:target 行为但在 :hover in CSS

:target behaviour but on :hover in CSS

css

css-selectors

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

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

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

:target 行为但在 :hover in CSS

:target behaviour but on :hover in CSS

css

css-selectors

考虑 w3schools example of the :target selector:

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

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

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