Make text appear somewhere else on hover - html

Question

I have an image, and when I hover over the image, I want to make text appear somewhere else on the screen. I've found lots of solutions making text appear on the image, but not somewhere else on the page. Any ideas?
Here's what I'm trying:
HTML:
<div class="dan-profile-picture"></div>
blah blah blah
<div class="dan-profile">lots of text</div>
CSS:
div.dan-profile-picture {
width: 150px;
height: 150px;
border-radius: 75px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background: url(./images/dan.jpg) no-repeat;
border:3px solid black;
}
div.dan-profile {
display:none;
}
div.dan-profile-picture:hover {
opacity:0.5;
}
div.dan-profile-picture:hover + div.dan-profile {
display:block;
}

Answer 1

if you prefer jQuery :
$('.dan-profile-picture').hover(function () {
var posx = Math.floor(Math.random() * $("body").width());
var posy = Math.floor(Math.random() * $("body").height());
$('.dan-profile').css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'block'
});
});
Fiddle Demo
update
to hide the div, you can use either a call back function in existing jQuery - as mentioned in comments by user3008011
$('.dan-profile-picture').hover(function () {
var posx = Math.floor(Math.random() * $("body").width());
var posy = Math.floor(Math.random() * $("body").height());
$('.dan-profile').css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'block'
});
},function(){ //this is call back function
console.log('out'); //will be triggered when main
$('.dan-profile').hide(); //function completes
});
demo
second way - since you are new to jQuery - you can trigger hide even on mouseout
$('.dan-profile-picture').mouseout(function () {
$('.dan-profile').css({
'display': 'none'
});
});
demo

Answer 2

make dan-profile a child of dan-profile-picture
.dan-profile-picture{
position:relative;
}
.dan-profile{
position:absolute;
right: -30px /* whichever value you desire */
top: -30px /*whichever value you desire */
display:none;
}
.dan-profile-picture:hover .dan-profile{
display:block;
}
hope this helps

Answer 3

This should do the trick.
div.dan-profile-picture {
width: 150px;
height: 150px;
border-radius: 75px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background: url(./images/dan.jpg) no-repeat;
border:3px solid black;
}
.dan-profile-picture:hover {
opacity:0.5;
}
.dan-profile{display:none;}
.dan-profile-picture:hover + .dan-profile{display:block;}
Fiddle
Remember that with the + selector, the element must be the directly next element. If there are elements in between, this selector won't work and you'll have to resort to javascript.
See this page for more info on css selectors
Number 7. of that list is the one I used for your user case
"This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element."