Question

我想像维基百科那样实现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>

Answer 1

CSS只允许元素对父母的悬停做出反应（也许是兄弟姐妹，我不确定，如果有人能说出来的话）。

你必须使用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()以供参考。

修改

在您的情况下，您将此函数绑定到所有参考锚点：

$('#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>，或为这些元素添加可识别的包装。它允许您绑定hover()而不指定每个<a>标记，使用$('.refAnchors')或$('.refAnchorsWrapper a')之类的内容。

Answer 2

纯CSS无法实现这一点，因为工具提示是依赖于操作系统的功能。

然而，可以使用JS完成 - 尝试qTip或制作自己的工具提示jQuery脚本。

覆盖所有工具提示的一种相对简单的方法是：

$('[title]')
.each(function() {
    $(this).data('title', $(this).attr('title'));
    $(this).removeAttr('title');
})
.hover(function(e) {
    window.tooltipID = 't' + (Math.random() + '').replace('0.', '');
    $('<div />', {
        id: tooltipID,
        class: 'tooltip-content',
        html: $(this).data('title'),
        style: 'position: absolute;
        top: ' + e.pageY + '; left: ' + e.pageX
    }).appendTo('body');
}, function() {
    $('#' + window.tooltipID).remove();
});

Answer 3

使用CSS是不可能的，但jQuery可以实现。

您可以使用qTip：http://craigsworks.com/projects/qtip/docs/

Answer 4

您可以使用javascript轻松完成，无需任何框架：

<!DOCTYPE html>
<html>
    <head>      
        <style type="text/css">
            *[data-hoverWithLink=true] {
                background: lightblue;
            }
        </style>
        <script type="text/javascript">
            window.addEventListener("load", function() {
                Array.map.call(null, document.getElementsByTagName("a"), function(link) {
                    var href = link.getAttribute("href");
                    if(href.substring(0, 1)) {
                        var target = document.getElementById(href.substring(1));
                        link.addEventListener("mouseover", function() {
                            target.setAttribute("data-hoverWithLink", true);
                        });
                        link.addEventListener("mouseout", function() {
                            target.setAttribute("data-hoverWithLink", false);
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <p><a href="#faq1content">Jump to FAQ FAQ 1</a></p>
        <p><a href="#faq2content">Jump to FAQ FAQ 2</a></p>
        <p><a 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>

如何在维基百科上实现鼠标悬停效果？

4 个答案:

HTML

的Javascript

修改