考虑了的W3Schools的例子:target选择 ：
<!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>
当你点击a nchor引用另一个元素是款式p与相应的id 。
我想要的效果：目标，但悬停代替。 如何做到这一点？
你如何样式的事情， href指向悬停的页面？
如果这是不可能的。 什么是表现最好的JavaScript的解决方案？
因为CSS选择可以从对同级的稍后兄弟姐妹，后代或后裔的较早元件仅遍历（和不能选择父母，或先前的同胞，元素），这不能与CSS完成。 由于徘徊在<a>样式后:target -ed元素将首先需要从hovered-遍历父<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：
- 参考组合子（
E:matches(:hover) /href/ p ） 。
- JavaScript的：
-
Array.prototype.forEach() -
Element.getAttribute() -
EventTarget.addEventListener() -
Function.prototype.call() - 引导到JavaScript的正则表达式 。
-
String.prototype.indexOf() -
String.prototype.replace() -
switch () {...}操作 。
对于信息：
在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/#相邻的同胞-组合子 ＆ http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
