-1

当我将鼠标悬停时，我的文本文件出现了。当我不出现时，我希望它消失。我该怎么做？我的代码应该是什么样子？

<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>
4

4 回答 4

1

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

$( selector ).hover( handlerIn, handlerOut )

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

$(".button").hover(function () {
    $.ajax({
        url: "demo_test.txt",
        success: function (result) {
            $("#div1").html(result);
        }
    });
}, function () {
    $("#div1").html("");
});
于 2013-10-19T15:49:16.820 回答
0

试试这个（小提琴）：

$('#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，元素隐藏后仍然存在，因此用户界面不会移动。

于 2013-10-19T16:02:54.733 回答
0 
$(document).ready(function(){
   $(".button").hover(function(){ 
       $.ajax({
           url:"demo_test.txt", 
           success:function(result){ 
               $("#div1").html(result); 
           }
       }); 
   })
   .on("mouseleave", function(){
       $("#div1").hide();
   });
});
于 2013-10-19T15:49:20.263 回答
0

用这个

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

一旦按钮发生 mouseleave 事件，这将隐藏对象。

为此小提琴：

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

于 2013-10-19T16:14:27.103 回答