pat*_*pan 1 css css-selectors css3
: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悬停时页面中指向的东西？
因为CSS选择器只能从早期元素遍历到兄弟姐妹的后代兄弟,后代或后代(并且不能选择父元素或前兄弟元素),所以这不能用CSS完成.当悬停<a>到样式时,后面的:target元素将首先需要从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;
}
参考文献:
| 归档时间： |
|
| 查看次数： |
551 次 |
| 最近记录： |