我想实现类似维基百科的css效果。如果我将鼠标悬停在任何引用编号(例如 [1])上，底部引用内容将使用 CSS 边框效果进行标记。我怎样才能做到这一点？通过将鼠标悬停在一个链接上但其他元素响应...只是不知道如何做到这一点。
我希望我已经清楚地表达了我的观点。
示例:http://en.wikipedia.org/wiki/2013_Harbin_smog#cite_note-14
我的测试代码:
<!-- declare that this document is written in HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<style>
p:target {background:lightblue;}
</style>
</head>
<!-- Beginning of the <body> tag -->
<body>
<p><a id='faq1link' href="#faq1content">Jump to FAQ FAQ 1</a></p>
<p><a id='faq2link' href="#faq2content">Jump to FAQ FAQ 2</a></p>
<p><a id='faq3link' href="#faq3content">Jump to FAQ FAQ 2</a></p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p id="faq1content"><b>FAQ content 1...</b></p>
<p id="faq2content"><b>FAQ content 2...</b></p>
<p id="faq3content"><b>FAQ content 3...</b></p>
</body>
</html>
最佳答案
CSS 只允许元素对父级的悬停使用react(也许 sibling 也是如此，我不确定，是否有人能告诉)。
为此，您必须使用 Javascript。
为了方便起见，下面是一个使用 jQuery 的示例:
HTML
<span data-tooltip-id="ref0">Reference 0</span>
...
<div id="ref0">This is the reference 0</div>
Javascript
$('.elements-to-hover').hover(function(){
var idRef = $(this).data('tooltip-id');
$('#'+idRef).addClass('yourBorderedClass');
},function(){
var idRef = $(this).data('tooltip-id');
$('#'+idRef).removeClass('yourBorderedClass');
});
第一个函数在 mouseenter 上触发，mouseleave 上的第二个函数.
参见jQuery's .hover() 供引用。
编辑
根据您的情况，您将将此函数绑定(bind)到所有引用 anchor :
$('#faq1link, #faq2link, #faq3link').hover(function(event){
var idRef = $(this).attr('href'); // or this.href
$('#'+idRef).addClass('yourBorderedClass');
},function(){
var idRef = $(this).attr('href'); // or this.href
$('#'+idRef).removeClass('yourBorderedClass');
});
我强烈建议您添加常见的 class给您<a> ，或为这些元素添加可识别的包装。它将允许您绑定(bind) hover()不指定每个 <a>标签，使用类似 $('.refAnchors') 的内容或$('.refAnchorsWrapper a') .
关于css - 如何实现像维基百科上的鼠标悬停效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19561963/