2

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

4 回答 4

3

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.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');

});

我强烈建议您添加一个 commonclass到您的<a>,或者为这些元素添加一个可识别的包装器。它将允许您在hover()不指定每个<a>标签的情况下进行绑定,使用类似$('.refAnchors')or的东西$('.refAnchorsWrapper a')

于 2013-10-24T09:27:06.613 回答
1

这是纯 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();
});
于 2013-10-24T09:27:26.520 回答
1

这在 CSS 中是不可能的,但在 jQuery 中是可能的。

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

于 2013-10-24T09:30:18.623 回答
0

您可以使用 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>
于 2013-10-24T10:20:28.237 回答