Question

我想用鼠标移动一些文本bij，用url替换它。我知道你不能通过动画（用于css）来改变它，这就是我使用fadeout的原因。花了几个小时后，我仍然无法弄清楚它为什么不起作用。

我也喜欢页面中心的整个div，我试过valign等，但这也不起作用。这不是优先事项，但更换margin-top

会很好

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#change").hover(
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('<a href="Index.html">Continue</a>').fadeIn('slow'); 
    });
}, 
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('Welcome').fadeIn('slow'); 
    });    
});
</script>

提前THX！

Answer 1

使用html方法：

$(this).html('<a href="Index.html">Continue</a>').fadeIn('slow');

Answer 2

嗯，不像我想象的那么容易。

当快速移动鼠标时，很容易触发mouseenter / over mouseleave / out，这样：

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
    <p id="link" style="display:none"><a href="Index.html">Continue</a></p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

使用

$(function() {
  $("#change").hover(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  });
});

ALMOST有效。但由于进入/离开事件，您可能会在屏幕上看到两者

如果我们使用hoverIntent它可行 - 您需要先下载jquery.hoverIntent.minified.js

DEMO

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  }    
);

或者如果您坚持要更改html：DEMO

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('<a href="Index.html">Continue</a>').fadeIn('slow');
    });
  },
  function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('Welcome').fadeIn('slow');
    });
  }    
);

jquery更改文本并用链接替换它

2 个答案: