javascript - 悬停功能实现

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});

演示

整个代码：

 $(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 的左上角导航中执行此操作。

这是一个仅使用 CSS 的 JSFiddle 示例：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

Try this : (http://jsfiddle.net/u3pW8/23/)

Also load jquery on left side bar.I have made some change in script.

Answer 4

这是一种仅使用 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 5

我已经为您的第二个查询设置了一个 jsfilddle。

请看这个fiddle to Text Displayed follow the cursor

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 6

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

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

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;
}

> 指示符表示悬停在第一个元素上确实会在第二个元素上产生结果（如果第二个元素在第一个元素内）。