Question

当我悬停我的文本文件时出现。当我没有出现时，我希望它消失。我该怎么做？我的代码应该是什么样的？

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
   $(".button").hover(function(){ $.ajax({url:"demo_test.txt", success:function(result){ $("#div1").html(result); }}); }); 
});
</script>
</head>

<body>
   <div id="div1"></div>
<a href="#" class="button">Hover me</a> 
</body>

</html>

Answer 1

根据jQuery文档，hover函数允许在鼠标进入和鼠标离开时指定处理程序。

$( selector ).hover( handlerIn, handlerOut )

所以你可以根据它修改你的功能。

$(".button").hover(function () {
    $.ajax({
        url: "demo_test.txt",
        success: function (result) {
            $("#div1").html(result);
        }
    });
}, function () {
    $("#div1").html("");
});

Answer 2

$(document).ready(function(){
   $(".button").hover(function(){ 
       $.ajax({
           url:"demo_test.txt", 
           success:function(result){ 
               $("#div1").html(result); 
           }
       }); 
   })
   .on("mouseleave", function(){
       $("#div1").hide();
   });
});

Answer 3

试试这个（fiddle）：

$('#text').text("SOME TEXT YOU CAN READ BECAUSE YOU ARE HOVERING").css("opacity", "0")
.mouseover(function () {
    $(this).animate({"opacity": "1"}, {duration: 200, queue: false}); 
}).mouseout(function() {
    $(this).animate({"opacity": "0"}, {duration: 200, queue: false});
});

我没有加载其他文件，因为没有可加载的演示文件。但这可以很容易地解决：

$.get("demo.txt", function(data) {
   // and here all the above, accordingly
});

我的提议还包含一个漂亮的平滑动画，并且由于它使用opacity，因此该元素在被隐藏后仍然存在，因此用户界面不会移动。

Answer 4

使用此

$(document).ready(function(){
  $(".button").mouseenter(function () { 
    // run the ajax request and load the file..
  });
  $('.button').mouseleave(function () {
    // run the code here such as $('#div1').hide() or .css('display', 'none');
  });
});

一旦从按钮发生鼠标移动事件，这将隐藏对象。

小提琴：

http://jsfiddle.net/afzaal_ahmad_zeeshan/SfVrn/1/

如何将鼠标添加到我的文件中？我的代码怎么样？

4 个答案: