Image about a text

Question

Image about a text

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I found a code for you to move the mouse and display a text, I would like it to show a photo.

Can be done with css or javascript but I do not know the part of the photo. type this

<style>
#mostrar{<br />
  display:none;<br />
  }<br />
</style>

<div id="passar_mouse">Passar o mouse</div>
<div id="mostrar">http://tcgbrasil.com/wp-content/uploads/2017/08/Sem-Título-1-600x600.png</div>
<script>
$('#passar_mouse').mouseover(function(){
  $('#mostrar').css('display', 'block');
});

$('#passar_mouse').mouseout(function(){
  $('#mostrar').css('display', 'none');
});  
    </script>

But I would like the image to appear floating, I'll show you what I already have, but it's a wordpress plugin.

javascript css

asked by anonymous 21.08.2017 / 21:06

2 answers

Webview changing the url according to the day how does the 'e' of javascript work? [duplicate]

score 3 · Answer 1

I just made this little code and I think that's what you're saying:

$("#texto").hover(function () {
	$("#image").css('display', 'block');
  $(this).mousemove(function(e){
    	$("#image").css({left:e.pageX + 15, top:e.pageY + 15});
  });
}, function () {
   $("#image").css('display', 'none');
});

#image{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgid="image" src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/"style="display:none;"/>

<div id="texto">
passa aqui o mouse
</div>

score 1 · Answer 2

I did not quite understand what you wanted, but would it?

$('.mouse').mouseover(function(){
  $('.mostrar').show()
})

$('.mouse').mouseout(function(){
  $('.mostrar').hide()
})

.mostrar{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="mouse">Passe o mouse aqui</div>
  <div class="mostrar">
    <img src="http://images.indianexpress.com/2016/10/got-759.jpg">
  </div>