Consider the 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>
When you click on the anchor referencing another element it styles thep with the corresponding id.
I want the effect of :target but on hover instead. how is this done?
how do you style the thing that href points to in the page on hover?
if this is not possible. what is the best-performing javascript solution?
Because CSS selectors can only traverse from an earlier element to a later sibling, descendant or descendant of a sibling (and cannot select parent, or previous-sibling, elements), this cannot be done with CSS. As hovering the <a> to style the later :target-ed elements would first require traversing to the parent from the hovered-<a> element.
To do this with JavaScript, then, I'd suggest:
// 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>
It is worth noting, though, that the CSS Selectors Module, Level 4, has a proposed solution, the reference-combinator, to address this:
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;
}
Which suggests that the correct syntax (which, currently of course, does not work) may be:
a:matches(:hover) /href/ p {
background-color: red;
}
References:
- CSS:
- Reference combinator (
E:matches(:hover) /href/ p).
- JavaScript:
Array.prototype.forEach().Element.getAttribute().EventTarget.addEventListener().Function.prototype.call().- Guide to JavaScript Regular Expressions.
String.prototype.indexOf().String.prototype.replace().switch () {...} operator.
For Info:
In CSS if link is ahead and adjacent to the target or target's parent, then you could do something similar:
[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>
To go further and understand ,See: http://www.w3.org/TR/css3-selectors/#attribute-representation
and notice those too : http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators & http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
