Jquery 显示/隐藏悬停或鼠标输入问题

Question

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves

so far ive got this on my fiddle

$(document).ready(function() {   
  $(".image").mouseover(function(){
 $(".hover").show();
 })
$(".image").mouseout(function(){
 $(".hover").hide();
});

Thanks any help would be great

Answer 1

You Should Read Basic of JavaScript

$(document).ready(function() {   
  $(".image").mouseover(function(){
  $(".hover").show();
  })
    $(".image").mouseout(function(){
  $(".hover").hide();
});
})//added

Updated Demo

Answer 2

You were missing a });

Also, you can simplify your code to:

$(document).ready(function () {
    $(".image").mouseover(function () {
        $(".hover").show();
    }).mouseout(function () {
        $(".hover").hide();
    });
});

BTW, your HTML is broken. Fix that first.

Answer 3

Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.

$(document).ready(function() {
  $(".image").mouseover(function(){
      $(".hover").show();
  });
  $(".image").mouseout(function(){
      $(".hover").hide();
  });
});

You can test it here: http://jsfiddle.net/5PR5E/3/