Hover Function Execution

Question

I would like the user to roll over the contact header text. I would like the displayed content also to follow the cursor. I did jsfiddle with my freeze, but I don’t know why it doesn’t work ...

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

Demo

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

Answer 1

You can use pageX and pageY with the .offset () function

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

demo

whole code:

  $(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

You don't even need javascript, but the problem in your example is that you did not load jQuery. You can do this from the top left navigation in the JSFiddle.

Here is an example in JSFiddle using only 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

Here's an easy way to use 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

You must download jQuery to use the jQuery hover function. Select the jQuery 1.x library in the left pane of the panel.

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

Answer 5

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

Also load jquery in the left sidebar. I made some changes to the script.

Answer 6

I installed jsfilddle for your second request.

See this script. Text Displayed by 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 7

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

Indicator

the> means that hovering the first element has a result in the second (if the second is inside the first).