悬停功能实现

Question

我想在联系人标题文字上使用悬停。我希望显示的内容也跟随光标。 我用我的悬停做了一个jsfiddle，但我不知道为什么不工作......

HTML

<div class="toggleSwitch_j">
    <a href="#"> Contact Title </a>
    <div class="SignatureBox">Text Displayed</div>
</div>

CSS

.SignatureBox {
    display: none; 
    width: 200px;
    height: 30px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
}

JS

$(document).ready(function() {
    $('.SignatureBox').hide();
    $('.toggleSwitch_j').hover(function () {
        $(this).children('.SignatureBox').show();
    }, function () {
        $(this).children('.SignatureBox').hide();
    });
});

样本

http://jsfiddle.net/u3pW8/2/

Answer 1

您可以将pageX和pageY与.offset（）函数

一起使用

$(this).children('.SignatureBox').show().offset({left: e.pageX, top: e.pageY});

demo

整个代码：

 $(document).ready(function() {
$('.SignatureBox').hide();
        $('.toggleSwitch_j').hover(function (e) {

            $(this).children('.SignatureBox').show().offset({left: e.pageX, top: e.pageY});
        }, function () {
            $(this).children('.SignatureBox').hide();
        });

 });

Answer 2

你甚至不需要javascript，但你的例子中的问题是你没有加载jQuery。你可以从JSFiddle的左上角导航中做到这一点。

这是JSFiddle中仅使用CSS的示例：JSFiddle

HTML：

<div class="wrapper">
    <span>Visible Content (Hover Me)</span>
    <span class="hidden-content">Hidden Content (Visible when hovered)</span>
</div>

CSS：

.wrapper {
    position: relative;
}

.hidden-content {
    display: none;
    position: absolute;
}

.wrapper:hover .hidden-content {
    display: block;
}

JS：

$(function() {
    $(".wrapper").hover(function (e) {
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        $(".hidden-content").css("left", relX);
    });
});

Answer 3

这是一种使用CSS

的简单方法

HTML

<div id="wrapper">
LINK
<p class="text">text</p>
</div>

CSS

#wrapper .text {
position:relative;
bottom:10px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

Answer 4

您应该加载jQuery以使用jQuery hover函数。 在左框架面板中选择jQuery 1.x库。

http://jsfiddle.net/eg5bV/1/

Answer 5

试试这个：(http://jsfiddle.net/u3pW8/23/)

还在左侧栏上加载jquery。我在脚本中做了一些更改。

Answer 6

我为你的第二个查询设置了一个jsfilddle。

请参阅this小提示光标后显示的文字

<强> JS：

     $(document).ready(function() {
$('.SignatureBox').hide();
        $('.toggleSwitch_j').hover(function () {
            $(this).children('.SignatureBox').show();

    //attach the mousemove event
    $(window).bind('mousemove mouseover', function(evt) {

         $(".SignatureBox").offset({left:evt.pageX, top: evt.pageY});
    });
        }, function () {
            $(this).children('.SignatureBox').hide();
        });

 });

Answer 7

尝试完整的css3：

.toggleSwitch_j{
    pointer: cursor;
}

.toggleSwitch_j:hover > .SignatureBox {
    display: block; 
    width: 200px;
    height: 30px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
}

.SignatureBox {
    display: none;
}

＆gt;指示符表示第一个元素上的悬停在第二个元素上生成（如果第二个元素在第一个元素内部）。